CSS学习篇(2)_属性选择器

属性选择器可以根据元素的属性及属性值来选择属性

实例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;}