1. CSS 2引入了属性选择器。
2. 属性选择器可以根据元素的属性及属性值来选择元素。
3. 简单属性选择
3.1. 如果希望选择有某个属性的元素, 而不论属性值是什么, 可以使用简单属性选择器。
3.2. 如果您希望把包含标题(title)属性的所有元素变为红色, 可以写作:
*[title] {
color: red;
}
3.3. 与上面类似, 可以只对有href属性的超链接应用样式:
a[href] {
text-decoration: none;
}
3.4. 还可以根据多个属性进行选择, 只需将属性选择器链接在一起即可。例如, 为了将同时有href和title属性的html超链接应用样式, 可以这样写:
a[href][title] {
text-decoration: line-through;
}
3.5. 例子
3.5.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>简单属性选择</title>
<meta charset="utf-8" />
<style type="text/css">
[title] {
color: red;
}
a[href] {
text-decoration: none;
}
a[href][title] {
text-decoration: line-through;
}
</style>
</head>
<body>
<h2 title="Hello world">Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
<a title="W3School" href="http://w3school.com.cn">W3School</a>
</body>
</html>
3.5.2. 效果图
4. 根据具体属性值选择
4.1. 除了选择拥有某些属性的元素, 还可以进一步缩小选择范围, 只选择有特定属性值的元素。
4.2. 例如, 假设希望将指向Web服务器上某个指定文档的超链接变成红色, 可以这样写:
a[href="http://www.w3school.com.cn/about_us.asp"] {
color: red;
}
4.3. 与简单属性选择器类似, 可以把多个属性-值选择器链接在一起来选择一个文档。
a[href="http://www.w3school.com.cn/"][title="W3School"] {
color: red;
}
4.4. 属性与属性值必须完全匹配。
4.5. 例子
4.5.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>根据具体属性值选择</title>
<meta charset="utf-8" />
<style type="text/css">
a[href="http://www.w3school.com.cn/about_us.asp"] {
text-decoration: none;
}
a[href="http://w3school.com.cn"][title="W3School"] {
text-decoration: line-through;
}
</style>
</head>
<body>
<a href="http://www.w3school.com.cn/about_us.asp">About W3School</a>
<a href="http://w3school.com.cn" title="W3School">W3School</a>
</body>
</html>
4.5.2. 效果图
5. 根据部分属性值选择
5.1. 如果需要根据属性值中的词列表的某个词进行选择(意思是包含某个单词), 则需要使用波浪号(~)。
5.2. 例子
5.2.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>根据部分属性值选择(具体某个单词)</title>
<meta charset="utf-8" />
<style type="text/css">
p[class~="important"] {
color: red;
}
</style>
</head>
<body>
<h1>可以应用样式:</h1>
<p class="important warning">This is a paragraph.</a>
<p class="important">This is a paragraph.</a>
<hr />
<h1>无法应用样式:</h1>
<p class="warning">This is a paragraph.</a>
</body>
</html>
5.2.2. 效果图
6. 特定属性选择类型
6.1. 特定属性选择器, 用于选取带有以指定值开头的属性值的元素, 该值必须是整个单词。请看下面的例子:
*[lang|="en"] {
color: red;
}
6.2. 上面这个规则会选择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>
6.3. 一般来说, [att|="val"]可以用于任何属性及其值。当然, 这种属性选择器最常见的用途还是匹配语言值。
6.4. 例子
6.4.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>特定属性选择类型</title>
<meta charset="utf-8" />
<style type="text/css">
*[lang|="en"] {
color: blue;
}
</style>
</head>
<body>
<h1>可以应用样式:</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<hr />
<h1>无法应用样式:</h1>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
</body>
</html>
6.4.2. 效果图
7. 子串匹配属性选择器
7.1. 子串匹配属性选择器是更高级的选择器模块, 它是CSS2完成之后发布的。
7.2. 下表是对这些选择器的简单总结:
7.3. 例子
7.3.1. 代码
<!DOCTYPE html>
<html>
<head>
<title>子串匹配属性选择器</title>
<meta charset="utf-8" />
<style type="text/css">
a[href^="http://www.w3school.com"] {
text-decoration: none;
}
a[href$="cn"] {
color: orange;
}
a[href*="microsoft"] {
color: red;
}
</style>
</head>
<body>
<a href="http://www.w3school.com.cn/">W3School</a> <br />
<a href="http://www.w3school.com.cn/css/">CSS</a> <br />
<a href="http://www.w3school.com.cn/html/">HTML</a> <br />
<a href="http://www.w3c.org/">W3C</a> <br />
<a href="http://www.microsoft.com">Microsoft</a> <br />
<a href="http://www.apple.com.cn">Apple</a>
</body>
</html>
7.3.2. 效果图
8. CSS属性选择器参考手册