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>

4、相邻兄弟选择器
选择紧接在 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>

5、后代选择器
h1 元素后代的 em 元素的文本变为红色
h1 em {color:red;}
6、子元素选择器
选择只作为 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>

7、属性选择器
1）把包含标题（title）的所有元素变为红色
*[title] {color:red;}

<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>

2）只对有 href 属性的锚（a 元素）应用样式
a[href] {color:red;}
3）将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
a[href][title] {color:red;}
4）可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像
img[alt] {border: 5px solid red;}