标签：
中午吃饭时与同事简单聊了下H5和C3为我们提供的便利，晚上下班后简单整理了下CSS3的选择器，在这里跟大家分享下。
CSS3新增了许多灵活查找元素的方法，极大的提高了我们查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
其特点是通过属性来选择元素，具体有以下5种形式(E是element的首字母，下面都是简写代替，程序员总是那么懒，哈哈哈)：
1、E[attr] 表示存在attr属性即可；
/*存在*/
[class]{/*选中的是所有的div*/
color: red;
}
2、E[attr=val] 表示属性值完全等于val；
/*全等*/
[class="abcd"]{/*选中的是div2*/
color: red;
}
3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；
/*包含(任意位置)*/
[class*="abcd"]{
color: red;
}/*选中的是div2和div3,div4*/
4、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；
/*以什么开头*/
[class^="abcd"]{
color: red;
}/*选中的是div2和div3*/
5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；
/*结尾*/
[class$="abcd"]{
color: red;
}/*选中的是div2和div4*/
<body> <div><a href="#" class="abc">div1</a></div> <div><a href="#" class="abcd">div2</a></div> <div><a href="#" class="abcdef">div3</a></div> <div><a href="#" class="aabcd">div4</a></div> <div><a href="#" class="abc">div5</a></div> <div><a href="#" class="abc">div6</a></div> <div><a href="#" class="abc">div7</a></div> <div><a href="#" class="abc">div8</a></div> </body>
除了以前学过的:link、:active、:visited、:hover（我一般简称为LV,HA可以理解为，我今天买了个LV的包包，所以很开心，哈哈哈），CSS3又新增了其它的伪类选择器。
2.1、以某元素相对于其父元素或兄弟元素的位置来获取无素的结构伪类。
重点是要理解通过E来确定元素的父元素。
E:first-child第一个子元素
E:last-child最后一个子元素
E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素；
E:nth-last-child(n) 同E:nth-child(n) 相似，只是倒着计算；
n遵循线性变化，其取值0、1、2、3、4、... 但是当n<=0时，选取无效。
n可是多种形式：nth-child(2n)，表示选中偶数项,当然选中偶数项还可以写成nth-child(even)、nth-child(2n+1)表示选中奇数项,当然选中奇数项还可以写成nth-child(odd)、nth-last-child(-n+5)表示选中的是倒数第五个元素等；
E:empty 选中没有任何子节点的E元素；（使用不是非常广泛）
2.2、目标伪类
E:target 结合锚点进行使用，处于当前锚点的元素会被选中；
E::first-letter文本的第一个单词或字（如中文、日文、韩文等）；
E::first-line 文本第一行；
注意：E::before、E::after（比较常用，很方便）
是一个行内元素，需要转换成块元素
E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。
E::selection 可改变选中文本的样式（文本颜色，背景色等）；
注意：":" 与 "::" 区别在于区分伪类和伪元素
标签：
原文地址：http://www.cnblogs.com/h-jj/p/5747820.html
