【CSS选择符】后代选择符
2017-12-26 本文已影响10人
德育处主任
微信订阅号：rabbit_svip
在学习后代选择符之前，首先要了解一下组成一个网页的HTML家谱，每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签（<html>标签），相当于所有其他标签的始祖。<head>和<body>标签在<html>标签里，所以<html>标签是二者的祖辈。
先看看一段HTML代码：
<html>
<head>
<title>Document</html>
</head>
<body>
<h1>Header</h1>
<p> A paragraph of <strong>important</strong>text.</p>
</body>
</html>
以下是结构示意图
image.png
- 祖辈：外层HTML标签是内层标签的祖辈。<body>标签是其内部所有标签（<h1>、<p>和<strong>标签）的祖辈。
- 后代：标签里的其他标签是后代。<body>标签是<html>标签的后代，<p>标签即使<body>标签的后代，也是<html>标签的后代。
- 父辈：父辈标签是另一个标签的直接祖辈。<html>标签是<head>和<body>的父辈，而不是其他标签的父辈；<p>标签是<strong>标签的父辈。
- 子代：直接被另一个标签保卫的标签是外层标签的子代。<h1>和<p>是标签是<body>标签的子代，而<strong>标签不是。<strong>标签直接包含在<p>标签里，所以是<p>标签的子代。
- 同辈：父辈相同的标签叫同辈标签，相当于兄弟姐妹。如<head>和<body>是同辈标签，<h1>和<p>也是同辈标签。
在CSS中，后代选择器的写法是：
祖辈 后代 { 样式 ; }
首先，先找到祖辈，然后中间有一个空格，空格后面跟着后代。
例如
header h1 { color: red;}
意思就是<header>标签里的所有<h1>标签，字体都改成红色。
在<header>标签外的<h1>标签，不会受到上面那行代码的影响。
后代选择符可以由2个以上元素组成，例如：
- ul li a
- body li a
- html li a
- html body ul li a
以上四个选择符的作用相同，因此表明，无需指明目标标签的所有直系。
一般来说，应该使用能达到目的的最简短的后代选择符。所有标签都在<html>和<body>标签里，因此没要在后代选择符中指定<html>和<body>。
后代选择符里的选择符数量会影响冲突样式的处理方式，这种冲突处理机制成为特指度。会在后面的笔记中讲到。
同样的，后代选择符也不局限于只能使用类型选择符。
可以使用不同类型的选择符构建复杂的后代选择符。例如
.intro a { color: yellow; }
意思就是：如果某个标签的类为intro，就把上述样式应用到这个标签的所有链接后代（a）上。
注意：
p.intro和p .intro不一样。前者是没空格隔开的。
p.intro的意思是：类为intro的<p>标签。
p .intro的意思是<p>标签里面的所有类为intro的标签。
HTML与CSS 目录：HTML与CSS
下一篇：【CSS选择符】伪类和伪元素
