CSS后代选择器

关系选择器,顾名思义,是根据HTML元素在DOM树中的关系来选择元素,这些关系包括后代、父子、同胞、相邻同胞。于是,关系选择器就包括后代选择器、子选择器、相邻同胞选择器、同胞选择器。

表 2-2 关系选择器
选择器语法功能描述版本
后代选择器E F选择E元素的所有后代F元素1
子选择器E > F选择E元素的所有子元素F2
相邻同胞选择器E + F选择紧接在E元素之后的第一个兄弟元素F2
同胞选择器E ~ F选择E元素之后的所有兄弟元素F3

后代选择器

后代选择器(E F),也称包含选择器,用来选择特定元素的后代。在CSS中,后代是根据HTML文档中的DOM上下文来决定的。当元素发生嵌套时,内层的元素就成为外层元素的后代。如元素B嵌在元素A内部,B就是A的后代。而且,B的后代也是A的后代,就像家族关系。

定义后代选择器时,外层的元素写在前面,内层的元素写在后面,中间用空格分隔。后代选择器会影响到它的各级后代,没有层级限制。如:


  1. div p { color: red; }

上述选择器中,div 为祖先元素,p 为后代元素,其作用就是选择 div 元素的所有后代 p元素,不管 p 元素是 div 元素的子元素、孙辈元素或者更深层次的关系,都将被选中。换句话说,不论 p 是 div 的多少辈的后代,p 元素中的文本都会变成红色。

其实,后代选择器中的空格,是用来表示后代层级的,当然就不限于二级的。根据需要,从任一个祖先元素开始,直到想应用样式的那个元素,都可以被放到后代选择器链中。如:


  1. <ul>
  2. <li><a href="/home/">首页</a></li>
  3. <li><a href="/new/">新房</a></li>
  4. <li><a href="/esf/">二手房</a></li>
  5. <ul>
  6. <li><a href="/sale/">出售房源</a></li>
  7. <li><a href="/buy/">求购房源</a></li>
  8. </ul>
  9. <li><a href="/rent/">租房</a></li>
  10. </ul>

上述导航菜单中,假如希望所有锚文本的字体大小是16px,就可以通过后代选择器ul a来选择 ul 元素的所有后代,因为后代选择器会影响到它的各级后代。如:


  1. ul a {
  2.    font-size: 16px;
  3. }

假如又希望第二级列表项的锚文本的字体大小是12px,就可以通过ul.nav ul a的这种多层后代关系的后代选择器,它只选择第二级列表项的锚文本。


  1. ul li a {
  2. font-size: 12px;
  3. }

当然,这个后代选择器也可以写成ul li ul li a,以实现更精准的控制。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。


已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页