CSS 2 引入了属性选择器。

属性选择器可以根据元素的属性及属性值来选择元素。

简单属性选择

如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。

例子 1

如果您希望把包含标题(title)的所有元素变为红色,可以写作:

*[title] {color:red;}

亲自试一试

例子 2

与上面类似,可以只对有 href 属性的锚(a 元素)应用样式:

a[href] {color:red;}

亲自试一试

例子 3

还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。

例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:

a[href][title] {color:red;}

亲自试一试

例子 4

可以采用一些创造性的方法使用这个特性。

例如,可以对所有带有 alt 属性的图像应用样式,从而突出显示这些有效的图像:

img[alt] {border: 5px solid red;}

亲自试一试

提示:上面这个特例更适合用来诊断而不是设计,即用来确定图像是否确实有效。

例子 5:为 XML 文档使用属性选择器

属性选择器在 XML 文档中相当有用,因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素,使之显示为红色,以便能更关注有 moons 的行星,就可以这样写:

planet[moons] {color:red;}

这会让以下标记片段中的第二个和第三个元素的文本显示为红色,但第一个元素的文本不是红色:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

查看效果

根据具体属性值选择

除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。

例子 1

例如,假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写:

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

亲自试一试

例子 2

与简单属性选择器类似,可以把多个属性-值选择器链接在一起来选择一个文档。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

这会把以下标记中的第一个超链接的文本变为红色,但是第二个或第三个链接不受影响:

<a href="http://www.w3school.com.cn/" title="W3School">W3School</a>
<a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a>
<a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>

亲自试一试

例子 3

同样地,XML 语言也可以利用这种方法来设置样式。

下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素:

planet[moons="1"] {color: red;}

上面的代码会把以下标记中的第二个元素变成红色,但第一个和第三个元素不受影响:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

查看效果

属性与属性值必须完全匹配

请注意,这种格式要求必须与属性值完全匹配。

如果属性值包含用空格分隔的值列表,匹配就可能出问题。

请考虑一下的标记片段:

<p class="important warning">This paragraph is a very important warning.</p>

如果写成 p[class="important"],那么这个规则不能匹配示例标记。

要根据具体属性值来选择该元素,必须这样写:

p[class="important warning"] {color: red;}

亲自试一试

根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。

假设您想选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点:

p[class~="important"] {color: red;}

亲自试一试

如果忽略了波浪号,则说明需要完成完全值匹配。

部分值属性选择器与点号类名记法的区别

该选择器等价于我们在类选择器中讨论过的点号类名记法。

也就是说,p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。

那么,为什么还要有 "~=" 属性选择器呢?因为它能用于任何属性,而不只是 class。

例如,可以有一个包含大量图像的文档,其中只有一部分是图片。对此,可以使用一个基于 title 文档的部分属性选择器,只选择这些图片:

img[title~="Figure"] {border: 1px solid gray;}

这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

亲自试一试

子串匹配属性选择器

下面为您介绍一个更高级的选择器模块,它是 CSS2 完成之后发布的,其中包含了更多的部分值属性选择器。按照规范的说法,应该称之为“子串匹配属性选择器”。

很多现代浏览器都支持这些选择器,包括 IE7。

下表是对这些选择器的简单总结:

类型 描述
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素

可以想到,这些选择有很多用途。

举例来说,如果希望对指向 W3School 的所有链接应用样式,不必为所有这些链接指定 class,再根据这个类编写样式,而只需编写以下规则:

a[href*="w3school.com.cn"] {color: red;}

亲自试一试

提示:任何属性都可以使用这些选择器。

特定属性选择类型

最后为您介绍特定属性选择器。请看下面的例子:

*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

亲自试一试

一般来说,[att|="val"] 可以用于任何属性及其值。

假设一个 HTML 文档中有一系列图片,其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像:

img[src|="figure"] {border: 1px solid gray;}

亲自试一试

当然,这种属性选择器最常见的用途还是匹配语言值。

CSS 选择器参考手册

选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

[转] 属性选择器.mark的更多相关文章

  1. (3)选择元素——(6)属性选择器(Attribute selectors)

    Attribute selectors are a particularly helpful subset of CSS selectors. They allow us to specify an ...

  2. id选择器、类选择器、属性选择器

    在网页编辑时,通常要对样式进行各种设置.我们借助CSS样式设计中的选择器,就能很好很方便的对它们进行管理和设置了. 今天,跟大家分享一下几个常用的选择器:id选择器.类选择器.属性选择器. id选择器 ...

  3. sizzle分析记录:属性选择器

    源码部分 通过Sizzle.attr匹配出值 然后通过表达式刷选计算 "ATTR": function( name, operator, check ) { return func ...

  4. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  5. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  6. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  7. css3新增的属性选择器

    使用css选择器,可以实现一个样式对应多个html文档的元素,在{}前面的部分就是"选择器",指明了样式的作用对象. 在CSS中追加了三个属性选择器:[att*=val].[att ...

  8. jquery表单对象属性选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery属性选择器(同时匹配多个条件)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 手动进行Excel数据和MySql数据转换

    今天是全国数学建模比赛,同学选的一个题目需要对一个large的Excel表格进行统计,好哥们儿嘛--便帮助他完成了数据从Excel到MySql的转化.记下具体步骤分享给大家,也免得大家到网上到处乱找了 ...

  2. Linux统计文件夹下文件信息

    统计当前文件夹里面有多少文件,即统计文件个数 ls -l |grep "^-"|wc -l 统计当前文件夹里面有多少文件夹,即统计文件夹个数 ls -l |grep "^ ...

  3. uva 1030 - Image Is Everything(迭代更新)

    题目链接:uva 1030 - Image Is Everything 题目大意:有一个最大为n*n*n的立方体的一个不规整立体,由若干个1*1*1的小正方体构成(每一个小正方体被涂成不同的颜色),给 ...

  4. NIO组件Selector调用实例

    *对于nio的非阻塞I/O操作,使用Selector获取哪些I/O准备就绪,注册的SelectionKey集合记录关联的Channel这些信息.SelectionKey记录Channel对buffer ...

  5. js两个时间比较

    var applyStart = $("#ApplyStart").val().replace(/-/g,'/'); var applyEnd = $("#ApplyEn ...

  6. 【转】java 解析 plist文件

    为了方便的将spritesheet的图导入我自己的动画编辑器!我做了plist文件解析DOM解析比较麻烦 因为element getChildNodes 会获取到text对象.而这个对象可能是一个空白 ...

  7. 记录IOS入门的过程

    先说点私话.再进入正题吧,顺便抒发下情绪.公司传统业务不景气,而互联网正如火如荼,无奈被逼上梁山.開始学起了IOS编程.后来想想闲着也是闲着就学习学习呗.无奈公司确实不希望投入了.不愿意提供苹果电脑. ...

  8. [Webpack 2] Polyfill Promises for Webpack 2

    If you're going to use code splitting with Webpack 2, you'll need to make sure the browser has suppo ...

  9. linux文件的隐藏属性:chattr

    1. 文件的隐藏属性 linux除了9个权限外,还有些隐藏属性, 使用chattr命令来设置. 使用方法: $ chattr +-=[ASacDdIijsTtu] + : 添加一个特殊參数 - :   ...

  10. 通过源码看android系列之multidex库

    我们在开发项目时,喜欢引入好多的第三方包,大大的方便了我们的开发,但同时,因为android方法总数的限制,不能超过65k,然而呢,随着我们的开发,65k最终还是会超过,所以,google就给出了这个 ...