CSS3 选择器——属性选择器

淡淡的烟草味﹌ 2022-06-10 05:24 438阅读 0赞

上一切在《[CSS3选择器——基本选择器][CSS3]》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。

从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3的属性选择器主要包括以下几种：

1.  E\[attr\]：只使用属性名，但没有确定任何属性值；
2.  E\[attr="value"\]：指定属性名，并指定了该属性的属性值；
3.  E\[attr~="value"\]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
4.  E\[attr^="value"\]：指定了属性名，并且有属性值，属性值是以value开头的；
5.  E\[attr$="value"\]：指定了属性名，并且有属性值，而且属性值是以value结束的；
6.  E\[attr\*="value"\]：指定了属性名，并且有属性值，而且属值中包含了value；
7.  E\[attr|="value"\]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

为了更好的说明CSS3属性选择器的使用方法，我们把第一节的demo换成别的结构，如下所示：

初步美化一下上面的代码

.demo { width: 300px; border: 1px solid #ccc; padding: 10px; }
    
    		 	.demo a { float: left; display: block; height: 20px; line-height: 20px; width: 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; text-align: center; background: #f36; color: green; margin-right: 5px; text-decoration: none; }

最初效果如下所示：

![css3-selector-status.png][]

下面就开始针对上面列出的每个属性选择器来，具体分析其使用方法。

#### 一、E\[attr\] ####

E\[attr\]属性选择器是CSS3属性选择器中最简单的一种。如果你希望选择有某个属性的元素，而不论这个属性值是什么，你就可以使用这个属性选择器，如：

.demo a[id] { background: blue; color:yellow;font-weight:bold;}

上面代码所表示的，选择了div.demo下所有带有id属性的a元素，并在这个元素上使用背景色为兰色，前景色为黄色，字体加粗的样式，对照上面的html，我们不难发现，只有第一个和最后一个链接使用了id属性，所以选中了这两个a元素，效果如下所示：

![css3-selector-attr.png][]

上面是单一属性的使用，你也可以使用多属性进行选择元素，如E\[attr1\]\[attr2\], 这样只要是同时具有这两属性的元素都将被选中：

.demo a[href][title] { background: yellow; color:green;}

不用我说，上面的代码大家都知道是什么意思了，他表示的是选择div.demo下的同时具有href,title两个属性的a元素，并且应用相对应的样式，如下所示：

![css3-selector-attr1.png][]

IE6不支持这个选择器。

#### 二、Ｅ\[attr="value"\] ####

E\[attr="value"\]选择器和E\[attr\]选择器，从字面上就能很清楚的理解出来，E\[attr="value"\]是指定了属性值“value”，而E\[attr\]只是选择了有对应的属性，并没有明确指其对应的属性值"value"，这也是这两种选择器的最大区是之处。从而缩小了选择 围，更能精确选择自己需要的元素，在前面实例基础上我们进行一下简单的修改：

.demo a[id="first"] { background: blue; color:yellow;font-weight:bold;}

和前面代码相比较，此处在id的属性基础上指定了相应的value值为“first”,这样一来我们选中的是div.demo中的a元素，并且这个元素有一个"id="first""属性值，请看下在的效果图：

![css3-selector-attr2.png][]

E\[attr="value"\]属性选择器也可以多个属性并写，进一步缩小选择范围：

.demo a[href="http://www.w3cplus.com"][title] { background: yellow; color:green;}

效果如下：

![css-selector-attr3.png][]

对于E\[attr="value"\]这种属性值选择器有一点需要注意：属性和属性值必须完全匹配，特别是对于属性值是词列表的形式时，如：

例如上面的代码，如果你写成：

.demo a[class="links"]{ color:red};/*这是一种写法不能和上面的html所匹配*/

上面的属性选择器并不会和上在的html匹配,因为他们的属性和属性值没有完全匹配，需要改成如下所示的代码，才能正确匹配：

.demo a[class="links item"]{ color:red};/*这样才是匹配的，记得中间的空格不能少的哟*/

IE6浏览器不支持这种选择器。

#### 三、E\[attr~="value"\] ####

如果你想根据属性值中的词列表的某个词来进行选择元素，那么就需要使用这种属性选择器：E\[attr~="value"\]，这种属性选择器是属性值是一个或多个词列表，如果是列表时，他们需要用空格隔开，只要属性值中有一个value相匹配就可以选中该元素，而我们前面所讲的E\[attr="value"\]是属性值需要完全匹配才会被选中，他们两者区别就是一个有“〜”号，一个没有“〜”号。我们来看一个这方面的实例：

.demo a[title~="website"]{ background:orange;color:green;}

上面代码表示的是，div.demo下的a元素的title属性中，只要其属性值中含有"website"这个词就会被选择，回头看看我们的html，不难发现所有a元素中“2，6，7，8”这四个a元素的title中都含有,所以被选中，请看效果：

![css3-selector-attr4.png][]

如果我们在上面的代码中，把那个“〜”号省去，大家看看他们不同之处：

.demo a[title="website"]{ background:orange;color:green;}

这样将不会选择中任何元素，因为在所有a元素中无法找到完全匹配的"title='website'",换句话说就没有选中任何元素，效果如下：

![css3-selector-status.png][]

这个实例再次证明了E\[attr="value"\]和E\[attr~="value"\]之间的区别，和其中“〜”所取的作用，我总结了一句话：属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配。

IE6不支持E\[attr~="value"\]属性选择器。

#### 四、E\[attr^="value"\] ####

E\[attr^="value"\]属性选择器，指的是选择attr属性值以“value”开头的所有元素，换句话说，选择的属性其以对应的属性值是以“value”开始的，一起来看个实例：

.demo a[href^="http://"]{ background:orange;color:green;}
    			.demo a[href^="mailto:"]{ background:green;color:orange;}

上面代码表示的是选择了以href属性，并且以"http://"和"mailto:"开头的属性值的所有a元素，换过更简单一点的呢？只要a元素中的href属性值是以"http://"或"mailto:"开头的a元素都会以选中，那么下面大家请对照上面的html和下面的效果图，看看是不是那么一回事：

![css3-selector-attr5.png][]

IE6不支持E\[attr^="value"\]选择器。

#### 五、E\[attr$="value"\] ####

Ｅ\[attr$="value"\]属性选择器刚好与E\[attr^="value"\]选择器相反，E\[attr$="value"\]表示的是选择attr属性值以"value"结尾的所有元素，换句话说就是选择元素attr属性，并且他的属性值是以value结尾的，这个运用在给你一些特殊的链接加背景图片很方便的，比如说给pdf,png,doc等不同文件加上不同icon，我们就可以使用这个属性来实现，如：

.demo a[href$="png"]{ background:orange;color:green;}

上面代码表示的是，选择div.demo中元素有href属性，并以png值结尾的a元素。（正如上面所说，只不过这里使用的是改变元素的背景色），效果如下：

![css3-selector-attr6.png][]

IE6不支持E\[attr$="value"\]属性选择器。

#### 六、E\[attr\*="value"\] ####

E\[attr\*="value"\]属性选择器表示的是选择attr属性值中包含子串"value"的所有元素。也就是说，只要你所选择的属性，其属性值中有这个"value"值都将被选中，如：

.demo a[title*="site"]{ background:black;color:white;}

上面代码表示的是：选择了div.demo中a元素，而a元素的title属性中只要有"site"就符合选择条件。效果如下：

![css3-selector-attr7.png][]

IE6不支持E\[attr\*="value"\]选择器。

#### 七、E\[attr|="value"\] ####

E\[attr|="value"\]是属性选择器中的最后一种，在说这个选择器使用之前先提醒大家attr后面的是一个竖线“｜”而不是l，小心搞错了。E\[attr|="value"\]被称作为特定属性选择器。这个选择器会选择attr属性值等于value或以value-开头的所有元素,我们来看个实例：

.demo a[lang|="zh"]{ background:gray;color:yellow;}

上面的代码会选中了div.demo中lang属性等于zh或以zh-开头的所有a元素，大家可以对照前面的html代友，其中"2,3,4,6"被选中，因为他们都有一个lang属性，并且他们的属性值都符合以"zh"或"zh-"开始的元素。具体效果如下：

![css3-selector-attr8.png][]

所以这种属性选择器用来匹配以“女value-1”,"value-2"的属性是很方便的，比如说你页面中有很多图片，图片文件名都是以"figure-1","figure-2"这样的方式来命名的，那么使用这种选择器选中图片就很方便了，大家可以在本地尝试一下，这种属性选择器最常常用的地方是如上面的示例用来匹配语言。

IE6不支持E\[attr|="value"\]选择器。

有关于属性选择器就上面这些内容了，属性选择器除了IE6不支持外，其他的浏览器都能支持，这样一来，如果你在你的页面上使用了属性选择器，而且你需要处理ie6兼容问题，那你就需要确保IE6用别的方法来实现或者你应该确保IE6用户将能获得一个可用的页面。七种属性选择器中E\[attr="value"\]和E\[attr\*="value"\]是最实用的，其中E\[attr="value"\]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input\[type="text"\],input\[type="checkbox"\]等，而E\[attr\*="value"\]能在网站中帮助我们匹配不同类型的文件，比如说你的网站上不同的文件类型的链接需要使用不同的icon图标，用来帮助你的网站提高用户体验，就像前面的实例，可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标。

到这里，CSS3的属性选择器就介绍完了，下一节将主要介绍CSS3的伪类选择器，特别是其中的nth-child选择器，将是CSS3选择器中最有吸引力的一部分，大家如果感兴趣的话，请观注本站的有关更新吧。让我们一起期待CSS3的无穷力量。

如需转载烦请注明出处：[W3CPLUS][]

著作权归作者所有。  
商业转载请联系作者获得授权,非商业转载请注明出处。  
原文:  [http://www.w3cplus.com/css3/attribute-selectors][http_www.w3cplus.com_css3_attribute-selectors]  ©  [w3cplus.com][W3CPLUS]

[CSS3]: http://www.w3cplus.com/css3/basic-selectors
[css3-selector-status.png]: /images/20220610/745725c3a36b41fd93196bbdb6bd1bc1.png
[css3-selector-attr.png]: /images/20220610/cf0c260d12bd478baf3d4eb0349c097e.png
[css3-selector-attr1.png]: /images/20220610/1a109cc08a944815b962d50f71939004.png
[css3-selector-attr2.png]: /images/20220610/0f1578e3e1bc41ec921fed4ed3b71efe.png
[css-selector-attr3.png]: /images/20220610/776c8c4186374ee9a7bc62a4aa456060.png
[css3-selector-attr4.png]: /images/20220610/4a0983d37ac844a2a28014400f699a6c.png
[css3-selector-attr5.png]: /images/20220610/7f5f0c51e580422c961747bc378cafbb.png
[css3-selector-attr6.png]: /images/20220610/8b4b93b7f8f74dd6b88eb8421dbd80ce.png
[css3-selector-attr7.png]: /images/20220610/5b7f73f7d01e40ce883828deceb0ef11.png
[css3-selector-attr8.png]: /images/20220610/e82637bcc030497dae4ebecd4b9367c6.png
[W3CPLUS]: http://www.w3cplus.com/
[http_www.w3cplus.com_css3_attribute-selectors]: http://www.w3cplus.com/css3/attribute-selectors