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;
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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

/* 就不一一列举了 */ 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

还有就是定义一组特定样式集合，例如我们定义一个button组件，这个组件有一些基础样式，还会有控制按钮大小的样式，控制按钮颜色的样式，控制按钮形状的样式，这些样式都是可以通过属性选择器来定义的。

按钮 
1

/* 定义所有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%;
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

它的用法是非常灵活多变的，它其实解放了我们的思维，让我们可以通过属性选择器来定义一组样式，而不是通过类选择器来定义一组样式，这样可以让我们的代码更加简洁，更加易读。

例如上面的按钮的大小我们可以直接增加size属性来控制，而不是通过class来控制，这样可以让我们的代码更加简洁，更加易读。

按钮 
1

/* 定义所有button元素的样式，且size属性为lg的样式 */
button[size=lg] {padding: 10px 16px;font-size: 18px;
} 
1
2
3

3. 兼容性

到现在为止，其实可以不用属性选择器的兼容性问题，因为现在的浏览器都支持属性选择器，但是如果你想要兼容IE8，那么就需要使用[attribute^=value]这种写法，因为IE8不支持[attribute*=value]这种写法。

如果不确定兼容性，可以使用caniuse来查看。

4. 使用属性选择器来实现一个tips组件

我们来实现一个tips组件，这个组件可以通过data-tips属性来控制tips的内容，然后随便写点样式就了可以啦。

按钮 
1

/* 定义所有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;
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这里使用了attr()函数来获取data-tips属性的值，这个函数的用法是attr(attribute)，它可以获取元素的属性值，如果属性不存在，那么它的值就是none。

兼容性：IE9+

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享