国外译文：网页设计如何使用CSS的选择器模式？

• 选择器模式
  模式 描述
  E 类型选择器，匹配任何一个名为 E 的元素。
  E F 子选择器，匹配元素 F ，如果 F 出现在元素 E 之内的话。
  E > F 父/子选择器，匹配元素 F ，如果 F 是 E 的子元素。
  E + F 相邻选择器，匹配元素 F ，如果 F 和 E 拥有共同的父元素，且 F 紧随 E 之后。

  这里有必要解释一下“父元素”、“子元素”、“父/子”及“相邻”这几个概念。为了便于说明，请看下面的代码：

  测试

  这是一个测试文本！

  从以上代码中，我们可以找出这样的关系：

  * h3 和 p 同为 div 的“儿子”，两者分别同 div 形成“父/子”关系。
  * h3,p,strong 都是 div 的“子元素”。（三者都包含在 div 之内）
  * div 是 h3 和 p 的“父元素”。
  * strong 和 p 形成“父/子”关系，strong 的“父元素”是 div 。
  * 但 strong 和 div 并非“父/子”关系，而是“祖孙”关系，但 strong 依然是 div 的“子（孙）元素”。
  * div 是 h3 p strong 三者的“祖先”，三者是 div 的“子（孙）元素”。
  * h3 和 p 两者是相邻的。

  上面一段好像绕口令，但是很重要，特别是有助于区别对待“E F”和“E > F”这两者的区别。

  这里我们借助上面的那个例子来演示一下这细微的差别：假如，我们需要将 strong 内的“测试”二字变为红色，我们都可以有哪些方法呢？

  1. div strong {color:red;} － 正确。strong 是 div 的“子元素”。
  2. p > strong {color:red;} － 正确。strong 和 p 是“父/子”关系。
  3. div > strong {color:red;} － 错误！strong 虽然是 div 的“子（孙）元素”，但两者乃是“祖孙”关系，而非“父/子”关系，因此不能用 > 符号连接。

  最后再提一下通用选择器，通用选择器以星号“*”表示，可以用于替代任何 tag ，比如下边这个：

  h2 + * { color: red }

  按照上述定义，则所有紧随 h2 的元素内的文字都将呈现红色。

  （出处：急速软件下载学院）

• 复制本页网址和标题，发送给你QQ/Msn的好友一起分享
  
  
• 国外译文：网页设计如何使用CSS的选择器模式？ 相关文章：
• ·Web2.0在中国步入歧途 缺赢利模式VC有错
• ·Flash与Photoshop合作制作模糊渐变动画
• ·CSS模块化设计——从空格谈起
• ·用AutoCAD五分钟内完成三维足球建模
• ·完全防御DDoS攻击的实时监测模型
• ·3DsMAX三维建模U盘造型
• ·BPEL模型基础
• ·AutoCAD滚珠轴承建模全过程
• ·Javascript的一种模块模式
• ·进入Cisco路由器配置模式
• 国外译文：网页设计如何使用CSS的选择器模式？ 相关软件
• ·公司企业网站管理系统模板功能强大版
• ·服装专卖店网站模板免费版
• ·NDS《旋转滚球》模拟器
• ·行会2之维京霸主－模拟方式免CD补丁
• ·医院大亨－模拟方式免CD补丁
• ·NDS《神奇四侠2 银影侠》模拟器
• ·NDS模拟器NO$GBA 2.4b
• ·CPS3街机模拟器
• ·NDS《新彩虹岛中文汉化版》模拟器
• ·CPS3《红色地球》模拟器

上一篇:CSS实现图片阴影效果三部曲(译文)

下一篇:常见的CSS问题的“一站式”的解决方案

• 特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
• 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
• 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

精品推荐

热点TOP10

特别推荐