CSS属性选择器中的通配符

根据部分属性值选择

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

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

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

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

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

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

也就是说,p.important 和 p["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" 的所有元素

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

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

a[href*="shunjian.me"] {color: red;}

原文地址:https://www.cnblogs.com/magicsky0/p/3394618.html