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>