CSS笔记（二）CSS属性选择器

　　对带有指定属性的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>

效果：