揭秘CSS(第 1 版)
2.3.1 后代选择器
阅读(

概述

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,以实现更精准的控制。

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验