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的后代，就像家族关系。

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

div p { color: red; }

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

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

<ul>
<li><a href="/home/">首页</a></li>
<li><a href="/new/">新房</a></li>
<li><a href="/esf/">二手房</a></li>
<ul>
    <li><a href="/sale/">出售房源</a></li>
    <li><a href="/buy/">求购房源</a></li>
</ul>
<li><a href="/rent/">租房</a></li>
</ul>

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

ul a {
   font-size: 16px;
}

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

ul li a {
    font-size: 12px;
}

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