CSS选择器2

cover-image 接上篇CSS选择器1。

####三、CSS属性选择器

选择器 含义
E[attr] 简单属性选择器。匹配所有具有attr属性的E元素，不考虑它的值。
E[attr=val] 匹配所有attr属性等于"val"的E元素。
E[attr~=val] 匹配所有attr属性具有多个空格分隔的值、其中一个值等于"val"的E元素。
E[attr|=val] 匹配所有attr 属性具有多个连字号（-）分隔的值、其中一个值以"val"开头的E元素，主要用于匹配语言值。
E[attr^="val"] 属性attr的值以"val"开头的元素
E[attr$="val"] 属性attr的值以"val"结尾的元素
E[attr*="val"] 匹配属性attr的值包含"val"字符串的元素

####实例

#####E[attr]:

h1[class] {
	color: red;
}

#####E[attr=val]:

a[target=_blank] {
    color: red;
}

#####E[attr~=val]:

p[class~=barren] {
    color: red;
}

#####E[attr|=val]:

*[lang|=en] {
    color: red;
}

#####E[attr^="val"]:

div[class^="test"] {
    color: blue;
}
div[class~=test] {
    text-decoration: underline;
}

#####E[attr$="val"]:

a[href$=".hk"] {
    color: red;
}

#####E[attr*="val"]:

div[class*="test"] {
    color: red;
}