【CSS选择符】后代选择符

在学习后代选择符之前，首先要了解一下组成一个网页的HTML家谱，每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签（标签），相当于所有其他标签的始祖。和标签在标签里，所以标签是二者的祖辈。

先看看一段HTML代码：

Document

Header

A paragraph of importanttext.

以下是结构示意图

祖辈：外层HTML标签是内层标签的祖辈。标签是其内部所有标签（、

和标签）的祖辈。

后代：标签里的其他标签是后代。标签是标签的后代，

标签即使标签的后代，也是标签的后代。

父辈：父辈标签是另一个标签的直接祖辈。标签是和的父辈，而不是其他标签的父辈；

标签是标签的父辈。

子代：直接被另一个标签保卫的标签是外层标签的子代。和

是标签是标签的子代，而标签不是。标签直接包含在

标签里，所以是

标签的子代。

同辈：父辈相同的标签叫同辈标签，相当于兄弟姐妹。如和是同辈标签，和

也是同辈标签。

在CSS中，后代选择器的写法是：

祖辈 后代 { 样式 ; }

首先，先找到祖辈，然后中间有一个空格，空格后面跟着后代。

例如

header h1 { color: red;}

意思就是标签里的所有标签，字体都改成红色。

在标签外的标签，不会受到上面那行代码的影响。

后代选择符可以由2个以上元素组成，例如：

ul li a

body li a

html li a

html body ul li a

以上四个选择符的作用相同，因此表明，无需指明目标标签的所有直系。

一般来说，应该使用能达到目的的最简短的后代选择符。所有标签都在和标签里，因此没要在后代选择符中指定和。

后代选择符里的选择符数量会影响冲突样式的处理方式，这种冲突处理机制成为特指度。会在后面的笔记中讲到。

同样的，后代选择符也不局限于只能使用类型选择符。

可以使用不同类型的选择符构建复杂的后代选择符。例如

.intro a { color: yellow; }

意思就是：如果某个标签的类为intro，就把上述样式应用到这个标签的所有链接后代（a）上。

注意：

p.intro和p .intro不一样。前者是没空格隔开的。

p.intro的意思是：类为intro的

标签。

p .intro的意思是

标签里面的所有类为intro的标签。