CSS 组合选择符

记录一下

后代选择器 

以空格分隔

div p
{
	background-color:black;
}

<div>
<p>在 div 中。</p>
</div>
<p>不在 div 中。</p>

在div中会显示黑色

子元素选择器

以大于号分隔，子元素选择器选择作为某元素子元素的元素。

div>p
{
	background-color:black;
}

<div>
    <p>黑色部分</p>
</div>
<div>
    <span><p>白色部分</p></span>
</div>

相邻兄弟选择器

以加号分隔,选择紧接在另一元素后的元素，且二者有相同父元素

div+p
{
	background-color:black;
}

<div>
<p>白色部分</p>
</div>

<p>黑色部分</p>

就是后面那一个选择的标签

后续兄弟选择器

以破折号分隔

div~p
{
  background-color:black;
}

<div>
<p>白色部分</p>
</div>

<p>黑色部分</p>
<p>黑色部分</p>

后面的所有的标签都会变黑