揭秘CSS(第 1 版)
2.4 属性选择器
阅读(

概述

CSS选择器

概述

基本选择器

关系选择器

属性选择器

在HTML中,可以通过元素各种各样的属性,来给元素增加很多附加信息。如通过 width 属性,可以指定元素的宽度;通过 id 属性,可以区分不同的元素,并通过Javascript来控制这些元素的内容和状态。

以往的CSS中,大量使用类选择器来定义样式。由于类选择器并不能说明什么样式服务于什么元素。因此,对于一个大型网站,CSS代码比较庞大,若要修改某个样式,就成为非常头疼的事情。

CSS的属性选择器使上述问题迎刃而解,因为它是语义化的选择器,可以根据元素是否拥有某个属性或属性的值来选择元素。

表 2‑3 属性选择器
选择器功能描述版本
E[attribute]选择拥有属性 attribute 的E元素,不考虑属性的值2
E[attribute = val]选择属性 attribute 的值等于val的E元素2
E[attribute ~= val]选择属性 attribute 的值是用空格分隔的多个单词,其中一个单词的值等于 val的E元素2
E[attribute |= val]选择属性 attribute 的值是用连字符"-"分隔的单词,并以 val 开头的E元素,主要用于 lang 属性,比如 "en"、"en-us"、"en-gb" 等2
E[attribute *= val]选择属性 attribute 的值包含 val 子字符串的E元素3
E[attribute ^= val]选择属性 attribute 的值以 val 开头的E元素,val 为完整的单词或单词的一部分3
E[attribute $= val]选择属性 attribute 的值以 val 结尾的E元素,val 为完整的单词或单词的一部分3

(1)E[attribute] 选择器

该选择器表示,选择拥有attribute属性的E元素,不管属性的值是什么。如果省略E,则表示选择任何类型的元素,只要它拥有attribute属性(下同)。

如,为所有包含 rel 属性的超链接应用样式,让其文本为绿色:

a[rel] { 
	color: green; 
} 

还可以根据多个属性进行选择,只需将多个属性链接在一起即可。如,将同时带有href和 title 属性的所有超链接设置为红色:

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

(2)E[attribute = val] 选择器

该选择器表示,选择设置了属性 attribute,且属性的值为val的E元素。如,将指向首页的的所有超链接设置为红色:

a[href = "http://www.waibo.wang/"] { 
	color: red; 
}

在处理表单时,许多元素都使用相同的标签,如复选框、文本输入框、提交按钮等,都使用 input 标签,而实际上它们的功能却完全不同,其功能由 type 属性的值来决定。如果仅仅想为文本输入框添加边框,就可以使用这个选择器。如:

input[type = "text"] { 
  border: 1px solid #ccc;
} 

该选择器也支持根据多个属性进行选择,只需将多个属性-值链接在一起即可。如,将 href 属性值为 http://www.waibo.wang/,且 title 属性值为“歪脖网首页”的所有超链接加粗显示:

a[href = "http://www.waibo.wang/"][title = "歪脖网首页"] { 
  font-weight: bold;
}

需要注意的是,该选择器的指定的属性值,必须与HTML标签中的属性值完全匹配才行,否则就会选择失败。如,在HTML中的class属性中,如果包含多个类名,类名之间用一个空格分隔:

<p class="urgent warning"> urgent warning</p>

如果要根据 class 属性的值来选择这个元素,必须写成:

p[class = "urgent warning"] { 
  font-weight: bold;
}

要求选择器的属性值必须与HTML标签中的属性值完全相同,urgent在前,warning在后,就连空格的个数也要完全相同,否则就会匹配失败。

(3)E[attribute ~= val] 选择器

该属性选择器表示,选择拥有属性 attribute,且属性的值是用空格分隔的列表,其中一个列表值为 val的E元素。

在HTML中,这方面最经典的例子就是 class 属性,它能接受一个或多个词作为其属性值。还是前面的示例:

<p class="urgent warning"> urgent warning</p>

如果要选择 class 属性值中包含 warning 的元素,写成下面这个样子就可以了:

p[class ~= "warning"] {
  font-weight: bold;
}

其实,该选择器只要求属性中包含指定的值即可,属性的值是否是词的列表也无关紧要,因此,上述选择器也会匹配 class = "warning" 的段落。也就是说,p[class ~= "warning"] 和 p.warning 的作用是等价的。

(4)E[attribute |= val] 选择器

该属性选择器表示,选择拥有属性 attribute,且属性的值是用连字符"-"分隔的单词,并以 val 开头的E元素,主要用于 lang 属性,比如 "en"、"en-us"、"en-gb" 等等。

如,通过使用通用选择器,这个选择器选择任何带有 lang 属性且属性值以 en 开头的元素:

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

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

<h1 lang = "en">Hello!</h1>
<p lang = "en-us">Greetings!</p>
<h2 lang = "fr">Bonjour!</h2>
<div lang = "cy-en">Jrooana!</div>

当然,该选择器可以用于任何属性和值。假如一个文档中有一系列图像,每个图像的文件名都形如 figuer-1.gif 和figuer-2.jpg,就可以使用以下选择器匹配所有这些图像:

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

(5)E[attribute *= val] 选择器

该属性选择器表示,选择拥有属性 attribute,且属性的值包含 val 子字符串的E元素。

假如网站在链接类名中添加 nav 子串,来区分导航链接,主导航的类名为 mainnav,页码导航的类名为 pagenav:

<div class = "mainnav">
  <a href = "#"></a>
</div>

<div class = "pagenav">
  <a href = "#" ></a>
</div>

如果想去掉所有导航链接的下划线,就可以使用该选择器:

div[class *= "nav"] a { 
  text-decoration: none;
}

(6)E[attribute ^= val] 选择器

该属性选择器表示,选择拥有属性 attribute,且属性的值以 val 开头的E元素,val 为完整的单词或单词的一部分。

如,为了突显指向网站外部的链接,就可以使用 E[ attribute ^= val ] 属性选择器,来寻找所有以 http: 开头的链接,在右侧添加外部链接的小图标。

a[href ^= "http://"] {
  padding-right: 20px;
  background: url(img/external.gif) no-repeat right top;
}

(7)E[attribute $= val] 选择器

该属性选择器表示,选择拥有属性 attribute,且属性的值以 val 结尾的E元素,val 为完整的单词或单词的一部分。

对于一些下载站,用户可以下载各种不同类型的文件,而文件类型是根据超链接中 href 属性值的最后几个字符来确定:

<a href = "a.doc">DOC文件</a>
<a href = "a.xls">XLS文件</a>
<a href = "a.ppt">PPT文件</a>
<a href = "a.pdf">PDF文件</a>
<a href = "a.rar">RAR文件</a>
<a href = "a.wmv">WMV文件</a>

这种情况,就可以使用该属性选择器,检测文件的扩展名,并为不同类型的文件添加不同的图标,以提高用户体验:

a { 
  display: block; 
  padding: 4px 24px; 
  font-size: 14px; 
  color: #000;
}
a[href $= "doc"],
a[href $= "docx"] { 
  background: url('img/doc.gif') no-repeat left center; 
}
a[href $= "xls"],
a[href $= "xlsx"] { 
  background: url('img/xls.gif') no-repeat left center; 
}
a[href $= "ppt"] { 
  background: url('img/ppt.gif') no-repeat left center; 
}
a[href $= "pdf"] { 
  background: url('img/pdf.gif') no-repeat left center; 
}
a[href $= "zip"],
a[href $= "rar"] { 
  background: url('img/rar.gif') no-repeat left center; 
}
a[href $= "wmv"] { 
  background: url('img/wmv.gif') no-repeat left center; 
}

运行结果如图 2‑7 所示:

CSS属性选择器
图2-7 CSS属性选择器

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验