属性选择器可以根据元素的属性及属性值来选择属性
实例1:
将含标题(title)的所有元素变成红色
[title]{
color:red;
}
实例2:
只对有href的a标签的元素变成红色
a[href]{
color:red;
}
实例3:
将同时包含href和title属性的HTML超链接的文本设置为红色
a[href][title]{
color:red;
}
实例4:
对所有带有alt属性的图像应用样式
img[alt]{
border:5px solid red;
}
实例4更适合用来诊断,确定图像是否确实有效
实例5:
XML文档使用属性选择器
选择有moons属性的所有planet元素,使之显示为红色
planet[moons]{
color:red;
}
实例6:
只选择有特定属性值得元素
将指向web服务器上某个指定文档的超链接变成红色
a[href=http://www.baidu.com]{
color:red;
}
实例7:
可以把多个属性-值选择器链接在一起来选择一个文档
a[href="http://www.w3school.com.cn/"][title="W3School"] {
color: red;
}
实例8:
XML也可以将多个属性-值选择器链接在一起
只选择moons属性值为"1"的那些planet元素
planet[moons="1"] {
color: red;
}
实例9:
属性与属性值必须完全匹配
<p class="important warning">This paragraph is a very important warning.</p>
p[class="important warning"]{color: red;}
如果写成:p[class="important"]{color: red;}则匹配不上
实例10:
如果只需要匹配其中某个字段,并不要求完全匹配的话,则需要使用"~"
p[class~="important"] {color: red;}
实例11:
"~=" 属性选择器能用于任何属性,不只是class
img[title~="Figure"] {border: 1px solid gray;}
选择 title 文本包含 "Figure" 的所有图像,没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配
实例12:
子串匹配属性选择器
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
实例13:
特定属性选择类型
选择 lang 属性等于 en 或以 en- 开头的所有元素
*[lang|="en"] {color: red;}