属性选择器的介绍

属性选择器顾名思义就是通过标签的属性来查找标签的选择器。让我们来回忆一下标签的属性是什么？HTML5 的所有标签共同拥有的属性叫作全局属性，除此之外还有标签自己拥有的属性，就叫作私有属性吧。除了 ID 选择器、标签选择器、Class 选择器以外，属性选择器能够满足以上选择器的功能，属性选择器的适用范围非常广泛。

语法规则及使用案例

属性选择器的基本语法：labelName[attrName=attrValue] {}。attrName 代表标签的属性，attrValue 代表属性值。比如，选择属性为 class，且属性值为 css 的 a 标签：

<a class="css" href="cnblogs.com/shiramashiro">My Blog Address.</a>

<a class="css html">Talk is cheap, show me the code.</a>

a[class="css"] {

	font-size: 20px;

}

以上是属性选择器最基本的用法，属性值等价的方式来筛选不太满足需求，类似于正则表达式的方式选择标签是最为高效和灵活的方式，属性选择器也提供这样的方式：

属性选择的方式	描述
label[attr^=value]	表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
label[attr$=value]	表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
label[attr*=value]	表示带有以 attr 命名的属性，且属性值至少包含 value 的元素。比如 zh-CN 和 zh，"value" 为 zh 时，zh-CN 和 zh 都匹配。
label[attr\|=value]	表示带有以 attr 命名的属性的元素，属性值为 "value" 或是以 "value-" 为前缀（"-"为连字符）开头。如 zh-CN 和 zh-TW 可以用 zh 作为 value。
label[attr~=value]	表示带有以 attr 命名的属性的元素，且属性值中至少有一个值为 value。

^=value

匹配属性值以 value 开头的标签（元素）：

<div id="ti">hello</div>

<div id="title">javascript!</div>

div[id^="ti"] {

	font-size: 20px;

}

$=value

匹配属性值以 value 结尾的标签（元素）：

<div id="title">hello</div>

<div id="le">javascript!</div>

div[id$="le"] {

	font-size: 20px;

	color: red;

}

*=value

匹配属性值至少包含一个 value 的标签；value 是属性值的一部分：

<div id="title title header top leader">hello</div>

<div id="title top">javascript!</div>

div[id*="der"] {

	font-size: 20px;

	color: red;

}

|=value

匹配属性值为 "value" 或是以 "value-" 为前缀（"-"为连字符）开头的标签：

<div class="zh-CH">中国</div>

<div class="zh-TW">中國</div>

div[class|="zh"] {

	font-size: 20px;

	color: red;

}

~=value

匹配属性值中至少有一个值为 value 的标签：

<div class="zh-CH zh">中国</div>

<div class="zh-TW">中國</div>

div[class~="zh"] {

	font-weight: bold;

}

巴特西

CSS 选择器（一）：属性选择器