标签：
一、ＣＳＳ新增选择器：
１、Ｅ[att ^ = "val"]匹配具有att属性，并以值val开头。
示例：
<style>
div[class^="a"]{
color:blue;
}
</style>
<div>
<div class="a1">测试数据a1</div>
<div class="a2">测试数据a2</div>
<div class="b2">测试数据b2</div>
<div class="b1">测试数据b1</div>
<div class="c1">测试数据c1</div>
<div class="c2">测试数据c2</div>
<div class="c3">测试数据c3</div>
</div>
2、Ｅ[att $ = "val"]匹配具有att属性，并以值val结尾。
示例：
<style>
div[class$="3"]{
color:blue;
}
</style>
<div>
<div class="a1">测试数据a1</div>
<div class="a2">测试数据a2</div>
<div class="b2">测试数据b2</div>
<div class="b1">测试数据b1</div>
<div class="c1">测试数据c1</div>
<div class="c2">测试数据c2</div>
<div class="c3">测试数据c3</div>
</div>
3、Ｅ[att * = "val"]匹配具有att属性，包含val。
4、Ｅ[att = "val"]匹配具有att属性，等于val。
二、结构性伪类
1、E:nth-child(n)匹配在父元素中第N个子元素E
示例：
p:nth-child(2){
color: red;
}
<div>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
</div>
2、E:nth-last-child(n)匹配在父元素中倒数第N个子元素E
3、E:nth-of-type(n)匹配在同类型中第N个同级元素E
4、E:nth-last-of-type(n)匹配在同类型中倒数第N个同级元素E
5、E:last-child匹配在父元素中最后一个元素E
6、E:first-of-type匹配在父元素中第一个元素E
7、E:only-child匹配在父元素中唯一子元素E
8、E:only-of-type匹配在同类型中唯一兄弟元素E
9、E:empty匹配没有任何子元素的元素E
三、元素状态选择器
1、E:checked（被选中）当复先框被选中时
示例：input:checked + span::after{
content: "测试";
display: block;
width: 100px;
height: 30px;
color:blue;
background-color: red;
}
<div style="height: 400px;width: 600px;border:1px solid blue">
<input type="checkbox"/>
<span>欢迎！</span>
</div>
2、E:enabled(可用)
3、E:disabled(不可用)
4、E：:selection(选中)当文本被选中时
示例：span::selection{
color: red;
background-color: blue;
}
<span>测试数据测试数据测试数据测试数据测试数据测试数据</span>；
四、过滤选择器 E：not(s) 过滤S，否定伪类选择器
五、目标伪类选择器 E：target 通过跳转（可用id/name）跳转改变
六、相邻选择器 E+E{} 第1个不改变，相邻后面才改变
七、兄弟选择器 E~E{...}第1个不改变，后面全改变
示例：p~p{
color: red;
}
<p>测试数据</p>
<p>测试数据</p>
<p>测试数据</p>
ＣＳＳ选择器归纳
标签：
原文地址：http://www.cnblogs.com/muqnly/p/4771690.html
