对带有指定属性的HTML元素设置样式。
参考: http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp
选择器 | 描述 |
---|---|
[attribute] | 用于选取带有指定属性的元素。 |
[attribute=value] | 用于选取带有指定属性和值的元素。 |
[attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
[attribute|=value] | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
[attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
- 属性选择器
将所有带title属性的元素设置为红色:
[title]
{
color:red;
}
使用:
<h2 title="Hello world">Hello world</h2>
效果:
- 属性和单值选择器
为title="Hello"的所有元素设置样式:
[title=Hello]
{
border:5px solid blue;
}
- 属性和多值选择器
为title中包含指定值的所有元素设置样式。
[title~=hello] { color:red; }
使用:
<h2 title="hello world">Hello world</h2>
<h1 title="every hello">Hello everyone</h1>
效果: