css选择器

1、交集选择器
既是p标签类名称又是text的字体变成红色
p.text{
color: red
}
2、并集选择器
让container下的所有元素内容为蓝色
#container p, span, em, strong{
color: blue
}
3、兄弟选择器
选择h1 元素后出现的段落
h1~p{
color:red;
}

<p>Hello word!</p>
<p>Hello word!</p>
<h1>Hello word!</h1>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>
<p>Hello word!</p>

3、相邻兄弟选择器
选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
h1 + p {margin-top: 50px;}

<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

4、后代选择器
h1 元素后代的 em 元素的文本变为红色
h1 em {color:red;}
5、子元素选择器
选择只作为 h1 元素子元素的 strong 元素
h1 > strong {color:red;}

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

来源：https://blog.csdn.net/star0311/article/details/99408642