CSS3选择器

选择器
选择器是CSS3 中一个重要的部分，通过使用CSS3 的选择器，可以提高开发人员
的工作效率。在本节中，我们将为读者介绍属性选择器和伪类选择器的基本用法。
1、属性选择器
在CSS3 中，我们可以使用HTML元素的属性名称选择性地定义CSS样式。其实，属
性选择器早在CSS2 中就被引入了，其主要作用就是为带有指定属性的HTML 元素设置
样式。
属性选择器一共分为4 种匹配模式选择器：
例如，通过指定div元素的id属性，设定相关样式。
 完全匹配属性选择器
 包含匹配选择器
 首字符匹配选择器
 尾字符匹配选择器
1.1 完全匹配属性选择器
其含义就是完全匹配字符串。当div 元素的id 属性值为test 时，利用完全匹配选择器
选择任何id 值为test 的元素都使用该样式。如下代码通过指定id 值将属性设定为红色字体：
<div id="article">测试完全匹配属性选择器</div>
<style type="text/css">
[id=article]{
color:red;
}
</style>
HTML5 移动Web 开发指南
50
1.2．包含匹配选择器
包含匹配比完全匹配范围更广。只要元素中的属性包含有指定的字符串，元素就使
用该样式。
其语法是：[attribute*=value]。其中attribute 指的是属性名，value 指的是属性值，
包含匹配采用“*=”符号。
例如下面三个div 元素都符合匹配选择器的选择，并将div 元素内的字体设置为红
色字体：
<div id="article">测试完全匹配属性选择器</div>
<div id="subarticle">测试完全匹配属性选择器</div>
<div id="article1">测试完全匹配属性选择器</div>
<style type="text/css">
[id*=article]{
color:red;
}
</style>
1.3．首字符匹配选择器
首字符匹配就是匹配属性值开头字符，只要开头字符符合匹配，则元素使用该样式。
其语法是：[attribute^=value]。其中attribute 指的是属性名，value 指的是属性值，
首字符匹配采用“^=”符号。
例如下面三个div 元素使用首字符匹配选择器后，只有id 为article 和article1 的元
素才被设置为红色字体。
<div id="article">测试完全匹配属性选择器</div>
<div id="subarticle">测试完全匹配属性选择器</div>
<div id="article1">测试完全匹配属性选择器</div>
<style type="text/css">
[id^=article]{
color:red;
}
</style>
1.4．尾字符匹配选择器
尾字符匹配跟首字符匹配原理一样。尾字符只匹配结尾的字符串，只要结尾字符串
符合匹配，则元素使用该样式。
其语法是：[attribute$=value]。其中attribute 指的是属性名，value 指的是属性值，
尾字符匹配采用“$=”符号。
例如下面三个div 元素使用尾字符匹配选择器时，只有id 为subarticle 的元素才被
设置为红色字体。
<div id="article">测试完全匹配属性选择器</div>
<div id="subarticle">测试完全匹配属性选择器</div>
<div id="article1">测试完全匹配属性选择器</div>
<style type="text/css">
[id$=article]{
color:red;
}
</style>

2、伪类选择器
在CSS3 选择器中，伪类选择器种类非常多。然后在CSS2.1 时代，伪类选择器就
已经存在，例如超链接的四个状态选择器：a:link、a:visited、a:hover、a:active。
CSS3 增加了非常多的选择器，其中包括:
 first-line 伪元素选择器
 first-letter 伪元素选择器
 root 选择器
 not 选择器
 empty 选择器
 target 选择器
这些伪类选择器是CSS3 新增的选择器，它们都能得到在Android 和iOS 平台下Web
浏览器的支持。现在我们就为你介绍这部分的选择器。
1．before
before 伪类元素选择器主要的作用是在选择某个元素之前插入内容，一般用于清除
浮动。
目前，before 选择器得到支持的浏览器包括：IE8+、Firefox、Chrome、Safari、Opera、
Android Browser 和iOS Safari。
before 选择器的语法是：
HTML5 移动Web 开发指南
52
元素标签:before{
content:"插入的内容"
}
例如，在p 元素之前插入“文字”：
p.before{
content:"文字"
}
2．after
after 伪类元素选择器和before 伪类元素选择器原理一样，但after 是在选择某个元
素之后插入内容。
目前，before 选择器得到支持的浏览器包括：IE8+、Firefox、Chrome、Safari、Opera、
Android Browser 和iOS Safari。
after 选择器的语法是：
元素标签:after{
content:"插入的内容"
}
3．first-child
指定元素列表中第一个元素的样式。语法如下：
li:first-child{
color:red;
}
4．last-child
和 first-child 是同类型的选择器。last-child 指定元素列表中最后一个元素的样式。
语法如下：
li:last-child{
color:red;
}
5．nth-child 和nth-last-child
nth-child 和nth-last-child 可以指定某个元素的样式或从后数起某个元素的样式。
例如：
//指定第2 个li 元素
li:nth-child(2){}
//指定倒数第2 个li 元素
li:nth-last-child{}
//指定偶数个li 元素
li:nth-child(even){}
//指定奇数个li 元素
li:nth-child(odd){}