CSS 组合选择器

• 后代选择器 - 某元素的后代元素
• 子元素选择器 - 某元素的直接子元素
• 相邻兄弟选择器 - 某元素后的第一个元素
• 后续兄弟选择器 - 某元素之后的所有相邻兄弟元素

CSS - 后代选择器

后代选择器作用于选取某元素的后代元素。
以下实例表示 css 作用于所有 <div> 元素里面的 <span>：

div span{ color: #5F9EA0; }

<div>
	<span>pangugle 教程</span>
</div>

CSS - 子元素选择器

子元素选择器作用于某元素的直接子元素。
以下实例表示 css 作用于所有 <div> 元素里面为 <span> 的直接子元素：

div > span{ color: #5F9EA0; }

<div>
	<span>pangugle 教程</span>
</div>

CSS - 相邻兄弟选择器

相邻兄弟选择器作用于某元素后的第一个元素，且二者有相同父元素。
以下实例表示 css 作用于所有 <div> 元素后的第一个 <span> 元素：

div + span{ color: #5F9EA0; }

<div>这是块元素</div>
<span>pangugle 教程</span>

CSS - 后续兄弟选择器

后续兄弟选择器作用于某元素之后的所有相邻兄弟元素，二者有相同父元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <span> :

div ~ span{ color: #5F9EA0; }

<div>这是块元素</div>
<span>pangugle 教程</span>
<p>这是一个段落</p>
<span>pangugle 教程</span>