CSS3 选择器——属性选择器（复习）

最新推荐文章于 2024-10-21 00:00:30 发布

原创最新推荐文章于 2024-10-21 00:00:30 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

css 选择器专栏收录该内容

1 篇文章

订阅专栏

本文深入解析CSS3属性选择器的用法，包括E[attr]、E[attr=value]、E[attr~=value]、E[attr^=value]、E[attr$=value]、E[attr*=value]、E[attr|=value]，通过实例展示如何高效定位元素和匹配文件类型，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

E[attr]：只使用属性名，但没有确定任何属性值；

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

E[attr="value"]：指定属性名，并指定了该属性的属性值；

.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}
.demo a[href="http://www.w3cplus.com"][title] {background: yellow; color:green;}

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

<a href="" class="links item" title="open the website">7</a>

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

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

E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；
```
.demo a[title~="website"]{background:orange;color:green;}
```
这个实例再次证明了E[attr="value"]和E[attr~="value"]之间的区别，和其中“〜”所取的作用，我总结了一句话：属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配。

E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；

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

E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
```
.demo a[href$="png"]{background:orange;color:green;}
```
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
```
.demo a[title*="site"]{background:black;color:white;}
```
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;
```
.demo a[lang|="zh"]{background:gray;color:yellow;}
```

有关于属性选择器就上面这些内容了，属性选择器除了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图标。

原文：http://www.w3cplus.com/css3/attribute-selectors