css属性选择器个人感觉是所有选择器中最具有特色的一个选择器，它可以通过元素的属性值来选择元素，这个属性值可以是一个单词，也可以是一个字符串，也可以是一个正则表达式，本文将介绍css属性选择器的基本用法，最后还会有一个小案例来实际的使用它。
1. 基本用法
css属性选择器的基本用法是通过元素的属性值来选择元素，下面是一些基本的用法：
- [attr]：选择具有attr属性的元素
- [attr=val]：选择具有attr属性且属性值为val的元素
- [attr~=val]：选择具有attr属性且属性值为val的元素，且val是一个单词，且val前后有空格
- [attr|=val]：选择具有attr属性且属性值为val的元素，且val是一个单词，且val前后有连字符
- [attr^=val]：选择具有attr属性且属性值为val的元素，且val是一个字符串，且val是属性值的开头
- [attr$=val]：选择具有attr属性且属性值为val的元素，且val是一个字符串，且val是属性值的结尾
- [attr*=val]：选择具有attr属性且属性值为val的元素，且val是一个字符串，且val是属性值的一部分
- [attr~=val i]：选择具有attr属性且属性值为val的元素，且val是一个单词，且val前后有空格，且val不区分大小写
- [attr|=val i]：选择具有attr属性且属性值为val的元素，且val是一个单词，且val前后有连字符，且val不区分大小写
- [attr^=val i]：选择具有attr属性且属性值为val的元素，且val是一个字符串，且val是属性值的开头，且val不区分大小写
- [attr$=val i]：选择具有attr属性且属性值为val的元素，且val是一个字符串，且val是属性值的结尾，且val不区分大小写
/* 选择具有attr属性的元素 */
[attr] {
color: red;
}
/* 选择具有attr属性且属性值为val的元素 */
[attr=val] {
color: red;
}
/* 选择具有attr属性且属性值为val的元素，且val是一个单词，且val前后有空格 */
[attr~=val] {
color: red;
}
/* 选择具有attr属性且属性值为val的元素，且val是一个单词，且val前后有连字符 */
[attr|=val] {
color: red;
}
/* 选择具有attr属性且属性值为val的元素，且val是一个字符串，且val是属性值的开头 */
[attr^=val] {
color: red;
}
/* 选择具有attr属性且属性值为val的元素，且val是一个字符串，且val是属性值的结尾 */
[attr$=val] {
color: red;
}
/* 选择具有attr属性且属性值为val的元素，且val是一个字符串，且val是属性值的一部分 */
[attr*=val] {
color: red;
}
/* 选择具有attr属性且属性值为val的元素，且val是一个单词，且val前后有空格，且val不区分大小写 */
[attr~=val i] {
color: red;
}
/* 选择具有attr属性且属性值为val的元素，且val是一个单词，且val前后有连字符，且val不区分大小写 */
[attr|=val i] {
color: red;
}
/* 选择具有attr属性且属性值为val的元素，且val是一个字符串，且val是属性值的开头，且val不区分大小写 */
[attr^=val i] {
color: red;
}
/* 选择具有attr属性且属性值为val的元素，且val是一个字符串，且val是属性值的结尾，且val不区分大小写 */
[attr$=val i] {
color: red;
}
2. 常见用法
一般情况下css的属性选择器很少使用到，最常见的用法是用来定义一类元素的样式，比如input元素，input元素有很多种类型，比如text、password、radio、checkbox等，这些类型都是input元素的属性，我们可以通过属性选择器来定义这些类型的样式。
/* 定义所有input元素的样式 */
input {
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px 12px;
font-size: 14px;
}
/* 定义所有input元素的样式，且type属性为text的样式 */
input[type=text] {
width: 200px;
}
/* 定义所有input元素的样式，且type属性为password的样式 */
input[type=password] {
width: 200px;
}
/* 定义所有input元素的样式，且type属性为radio的样式 */
input[type=radio] {
width: 20px;
height: 20px;
}
/* 就不一一列举了 */
还有就是定义一组特定样式集合，例如我们定义一个button组件，这个组件有一些基础样式，还会有控制按钮大小的样式，控制按钮颜色的样式，控制按钮形状的样式，这些样式都是可以通过属性选择器来定义的。
<button class="btn btn-lg btn-primary btn-circle">按钮</button>
/* 定义所有button元素的样式 */
button {
border: none;
outline: none;
cursor: pointer;
padding: 6px 12px;
font-size: 14px;
}
/* 定义所有button元素的样式，且class属性包含btn的样式 */
button[class*=btn] {
border-radius: 4px;
}
/* 定义所有button元素的样式，且class属性包含btn-lg的样式 */
button[class*=btn-lg] {
padding: 10px 16px;
font-size: 18px;
}
/* 定义所有button元素的样式，且class属性包含btn-primary的样式 */
button[class*=btn-primary] {
background-color: #337ab7;
color: #fff;
}
/* 定义所有button元素的样式，且class属性包含btn-circle的样式 */
button[class*=btn-circle] {
border-radius: 50%;
}
它的用法是非常灵活多变的，它其实解放了我们的思维，让我们可以通过属性选择器来定义一组样式，而不是通过类选择器来定义一组样式，这样可以让我们的代码更加简洁，更加易读。
例如上面的按钮的大小我们可以直接增加size属性来控制，而不是通过class来控制，这样可以让我们的代码更加简洁，更加易读。
<button class="btn btn-primary" size="lg">按钮</button>
/* 定义所有button元素的样式，且size属性为lg的样式 */
button[size=lg] {
padding: 10px 16px;
font-size: 18px;
}
3. 兼容性
到现在为止，其实可以不用属性选择器的兼容性问题，因为现在的浏览器都支持属性选择器，但是如果你想要兼容IE8，那么就需要使用[attribute^=value]这种写法，因为IE8不支持[attribute*=value]这种写法。
如果不确定兼容性，可以使用caniuse来查看。
4. 使用属性选择器来实现一个tips组件
我们来实现一个tips组件，这个组件可以通过data-tips属性来控制tips的内容，然后随便写点样式就了可以啦。
<button data-tips="这是一个tips">按钮</button>
/* 定义所有button元素的样式，且data-tips属性存在的样式 */
button {
border: none;
outline: none;
cursor: pointer;
padding: 6px 12px;
font-size: 14px;
border-radius: 4px;
background-color: #337ab7;
color: #fff;
position: relative;
}
/* 定义所有button元素的样式，且data-tips属性存在的样式 */
button[data-tips]:after {
content: attr(data-tips);
position: absolute;
top: -5px;
left: 50%;
transform: translate(-50% , -100%);
width: auto;
white-space: nowrap;
padding: 5px 10px;
background-color: #000;
color: #fff;
border-radius: 5px;
font-size: 12px;
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
/* 来一个小三角形 */
button[data-tips]:before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
/* hover时显示tips */
button[data-tips]:hover:after,
button[data-tips]:hover:before {
opacity: 1;
}
这里使用了attr()函数来获取data-tips属性的值，这个函数的用法是attr(attribute)，它可以获取元素的属性值，如果属性不存在，那么它的值就是none。
兼容性：IE9+
参考资料：MDN
