CSS3 的强大选择器

关系选择器:

儿子元素par>son 匹配par 元素的子级son 元素
相邻元素E+F 匹配紧贴着E 元素的F 元素
兄弟元素E~F 匹配E 后面所有同级别F 元素
// 测试代码

<div>
<ul>
<li>1 层</li>
<li>
<ul>
<li>2 层</li>
<li>2 层</li>
</ul>
</li>
</ul>
</div>
<p>p1</p>
<p>p2</p>
div ul {
border: 1px solid blue;
}
div+p {
border: 1px solid red;
}
div~p {
background: gray;
}

属性选择器:

E[属性名] 含有某属性的元素
E[属性名=值] 某属性=某值的元素

input[name=pwd] {
background: gray;
}
<input type="text" name="email">
<input type="text" name="pwd">

伪类选择器:

E:first-child 匹配作为第1 个子元素的元素E
E:last-child 匹配作为最后一个子元素的元素E
E:nth-child(N) 匹配作为第N 个子元素的元素E

li:first-child {
border: 1px solid blue;
}
li:last-child {
border: 1px solid pink;
}
li:nth-child(2) {
border: 1px solid red;
}
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>

伪对象选择器

E::before 设置E 元素前面的内容
E::after 设置E 元素后面的内容

a::before{
content: '^_^';   在a标签以前添加笑脸符号，在a标签以后添加':('符号
}
a::after {
content: ':(';
}
<a href="">哲学</a>