简单属性选择
例子:如果希望把包含标题(title)的所有元素变为红色,可以写作:
*[title] {color:red;}
例子:可以只对a标签的href属性使用应用样式:
a[href] {color:red;}
a[href][title] {color:red;}
根据具体属性值选择
例子:希望将指向Web服务器的某个指定文档的超链接变成红色,可以写成
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
例子:与简单属性选择器类似,可以把多个属性值选择器链接在一起来选择一个文档。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。
如果希望选择class属性中包含important的元素,可以用下面这个选择器做到这一点。
p[class~="important"] {color: red;}
注意:如果忽略了波浪号,则说明需要完成完全值匹配。
该选择器等价于我们在类选择器中讨论过的点号类名记法。
也就是说,p.important 和p[class="important"] 应用到HTML文档是等价的。
需要“~=”属性选择器的原因是它能用于任何属性,而不只是class。
例子:
img[title~="Figure"] {border: 1px solid gray;}
这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。
子串匹配属性选择器
类型 | 描述 |
---|---|
[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>