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>