CSS3新增选择器

逆流而上的经历是弥足珍贵的，很幸运，“逆战班”让我再一次挣脱束缚，打破禁锢，让自己在前端知识中乘风波浪！
CSS（层叠样式表）是前端技术的重要组成部分，是美化网页的常用手段，CSS为我们提供了强大的，多样的选择器，这些选择器非常有效的帮助设计人员实现了网页的精美制作。就像我们一样CSS也是在不断成长的，CSS3为设计人员提供了更多的选择器来优化程序。
CSS3中新增加的选择器包括属性选择器、结构伪类选择器、UI元素状态伪类选择器、伪元素选择器等。
1、属性选择器
div[class]{ background:red;} 选择所有class
div[class=“value”]{ background:red;} 选择属性值为指定词汇的元素
div[class~=”value”] { background:red;} 选择属性值中包涵指定词汇的元素
div[class|=”value”] { background:red;} 选择带有以指定开头的属性值的元素，该值必须是整个单词
div[class^=“value”]{ background:red;} 选择属性值以指定值开头的每个元素
div[class$=“value”]{ background:red;} 选择属性值以指定值结尾的每个元素
div[class*=“value”]{ background:red;} 选择属性值中包涵指定值的每个元
div[class][id]{background:red;} 选择所有的class 和id
使用加强的属性选择器可以实现更加灵活的元素选择。其应用如下：

测试文字测试文字

测试文字测试文字

测试文字测试文字

测试文字测试文字

测试文字测试文字

2结构伪类选择器
伪类选择器是CSS中已经定义好的选择器，不能随便取名，CSS3中增加的结构伪类选择器如下表所示：
选择器 功能描述
X：first-child 选择父元素中的第一个子元素X，与X：nth-child(1)等同
X：last-child 选择父元素中的最后一个子元素X，与X：nth-last-child(1)等同
X：root 选择X元素所在文档的根元素
X：nth-child(n) 选择父元素中的第n个子元素X
X：nth-last-child(n) 选择父元素中的倒数第n个子元素X
X：nth-of-type(n) 选择父元素中的具有指定类型的第n个子元素X
X：nth-last-of-type(n) 选择父元素中的具有指定类型的倒数第n个子元素X
X：first-of-type 选择父元素中的具有指定类型的第1个子元素X
X：only-child 选择父元素中只包含一个子元素，且该子元素匹配X元素
X：only-of-type 选择父元素中只包含一个同类型的子元素，且该子元素匹配X元素
X：empty 选择没有子元素的元素，且该元素不包含任何文本节点
注：其中n为参数，可以是从1开始的整数，可以是含n的公式，关键字（even、odd）
其应用示例如下：分别示例和三色交错

• 测试文字测试文字
• 测试文字测试文字
• 测试文字测试文字
• 测试文字测试文字

• 测试文字测试文字
• 测试文字测试文字
• 测试文字测试文字
• 测试文字测试文字
• 测试文字测试文字
• 测试文字测试文字

3、UI元素状态伪类选择器
UI元素状态伪类选择器指的是“UI元素状态”这方面的伪类选择器，CSS3中增加的UI元素状态伪类选择器如下表所示：
选择器 功能描述
z:focus 指定元素获得光标焦点时使用的样式。
z:chacked 选择z元素中所有被选中的元素
z::selection 改变z元素中被选择的网页文本的显示效果
z：enabled 选择z元素中所有“可用”元素
z：disabled 选择z元素中所有“不可用”元素
z：read-write 选择z元素中所有“可读写”元素
z：read-only 选择z元素中所有“只读”元素
z：：before 在z元素之前插入内容
z：after 在z元素之后插入内容
4、伪元素选择器
伪元素选择器并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器。CSS3中新增的伪元素选择器如下：
选择器 功能描述
Z：：first-line 为z元素的第一行文字添加样式
z：first-letter 在z元素中的文字的首字母或第一个字添加样式
z：：before 在z元素之前插入内容
z：after 在z元素之后插入内容
以上选择器简单应用如下：

第一行文字

第二行文字

第三行文字

以上为CSS3增加的部分常用选择器，感谢浏览。