css3选择器详解

6.2  选择器

选择器是CSS3中一个重要的部分，通过使用CSS3的选择器，可以提高开发人员的工作效率。在本节中，我们将为读者介绍属性选择器和伪类选择器的基本用法。

6.2.1  属性选择器

在CSS3中，我们可以使用HTML元素的属性名称选择性地定义CSS样式。其实，属性选择器早在CSS2中就被引入了，其主要作用就是为带有指定属性的HTML 元素设置样式。例如，通过指定div元素的id属性，设定相关样式。

属性选择器一共分为4种匹配模式选择器：

完全匹配属性选择器

包含匹配选择器

首字符匹配选择器

尾字符匹配选择器

1．完全匹配属性选择器

其含义就是完全匹配字符串。当div元素的id属性值为test时，利用完全匹配选择器选择任何id值为test的元素都使用该样式。如下代码通过指定id值将属性设定为红色字体：

 

<div id="article">测试完全匹配属性选择器</div>
<style type="text/css">
[id=article]{
    color:red;
}
</style>

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>

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>

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>