css的属性选择器的妙用，来用它实现一个轻量的tips组件吧

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