有一次面试一个三年工作经验的前端，我问css选择器有哪些？除了.class 类选择器、#id 选择器还有其他的哪些？
他没答上来，说了一句常用的就这些，还有哪些其他的？
来来来，跟我看看css到底有多少个选择器。
css 选择器有哪些？
1. 通配符选择器
通配符选择器（*）可以匹配任何元素，它是最基本的选择器，表现形式如下：
* {
color: red;
}
通配符选择器的性能很差，因为它会匹配文档中的所有元素，一般使用在reset.css中，将所有元素的样式重置为默认值，如下：
* {
margin: 0;
padding: 0;
}
记得曾经看过一个很好玩的案例，使用五个*选择器，将元素的背景色变成黑色，如下：
* * * * * {
background-color: black;
}
1. 元素选择器
元素选择器，也是标签选择器，是最基本的选择器，它可以匹配到页面中所有的元素，比如div、p、span等等。
div {
color: red;
}
该选择器使用的地方相对于其他选择器较少，一般用于重置元素的默认样式，如下：
p {
margin: 0;
padding: 0;
}
2. 类选择器
类选择器是以.开头的选择器，它可以匹配到页面中所有的类名，比如class="box"。
.class {
color: red;
}
类选择器是最常用的选择器，这个就不用多说了。
3. id 选择器
id 选择器是以#开头的选择器，它可以匹配到页面中所有的 id，比如id="box"。
#id {
color: red;
}
id 选择器的优先级比类选择器高，按照规范，一个页面中只能有一个 id，所以 id 选择器的使用场景也比较少，同时 id
选择器的性能也不如类选择器，所以一般不推荐使用。
4. 属性选择器
input[type="text"] {
color: red;
}
属性选择器可以匹配到页面中所有的属性，比如type="text"、class="box"等等。
就比如vue的样式隔离，它是通过属性选择器来实现的，vue转换生成的代码如下：
<template>
<div class="box"></div>
</template>
<style scoped>
.box {
color: red;
}
</style>
转换后的代码如下：
<html>
<head>title</head>
<style>
.box[data-v-a1b2c3d4] {
color: red;
}
</style>
<body>
<div id="app">
<div data-v-a1b2c3d4 class="box"></div>
</div>
</body>
</html>
属性选择器还有很多妙用，例如模糊匹配，比如input[type^="text"]，它可以匹配到所有以text开头的属性，比如type="text"
、type="text1"、type="text2"等等。
5. 伪类选择器
伪类选择器是以:开头的选择器，它可以匹配到页面中的特殊状态，比如hover、active、focus等等。
a:hover {
color: red;
}
伪类选择器可以使用的场景非常丰富，例如鼠标悬停（hover）、鼠标点击（active）、鼠标聚焦（focus）等等。
6. 伪元素选择器
伪元素选择器是以::开头的选择器，它可以匹配到页面中的特殊元素，比如before、after等等。
p::first-line {
color: red;
}
伪元素选择器是以::开头，伪类选择器是以:开头，很多同学发现伪元素好像用单冒号也可以，其实不然，单冒号是 CSS2 的写法，CSS3
之后规范要求使用双冒号，这样可以更好的区分伪类和伪元素，所以建议大家伪元素选择器使用双冒号。
7. 组合选择器
组合选择器是将多个选择器组合在一起，比如div.box、div.box p、div.box p span等等。
没想到吧，组合选择器也是选择器，大家是不是以为他们是 css 规定的一种语法，其实他们都是选择器中的一员，请不要忽略他们的存在。
div.class {
color: red;
}
组合选择器的使用场景很多，例如将一个元素切换到选中状态，一般我们会给它添加一个active类，然后通过active类来切换样式。
.active {
opacity: .7;
}
但是如果页面上有多个元素都使用到了active类，那么就会出现样式冲突的问题，而且他们的选中样式还不一样，这时候我们就可以使用组合选择器来解决这个问题。
div.active {
opacity: .7;
}
p.active {
font-weight: 700;
}
8. 后代选择器
后代选择器是以空格分隔的选择器，它可以匹配到页面中所有的后代元素，比如div p、div p span等等。
div p {
color: red;
}
后代选择有一个特点，就是它可以匹配到所有的后代元素，比如div p span，它可以匹配到div元素下的所有p元素下的所有span元素。
<div>
<p>
我是红色
<span>我是蓝色</span>
</p>
<span>我是默认黑色</span>
<div>
<p>我是红色</p>
<p>
我是红色
<span>我是蓝色</span>
</p>
</div>
</div>
<style>
div p {
color: red;
}
div p span {
color: blue;
}
</style>
9. 子代选择器
子代选择器是以>分隔的选择器，它可以匹配到页面中所有的子元素，比如div>p、div>p>span等等。
div > p {
color: red;
}
不同于后代选择器，子代选择器只能匹配到直接的子元素，比如div>p>span，它只能匹配到div元素下的直接子元素p
元素下的直接子元素span元素。
<div>
<p>
我是红色
<span>我是蓝色</span>
</p>
<span>我是默认黑色</span>
<block>
<p>我是默认黑色</p>
<p>
我是默认黑色
<span>我是默认黑色</span>
</p>
</block>
</div>
<style>
div > p {
color: red;
}
div > p > span {
color: blue;
}
</style>
11. 相邻兄弟选择器
相邻兄弟选择器是以+分隔的选择器，它可以匹配到页面中相邻元素，比如div+p会匹配到div元素后面的第一个p元素。
div + p {
color: red;
}
相邻兄弟选择的使用场景有两个，一个是为了消除margin重叠的问题，另一个是为了实现特定的样式。
<div></div>
<p>我是红色</p>
<p>我是默认黑色</p>
<style>
div + p {
color: red;
}
</style>
12. 通用兄弟选择器
通用兄弟选择器是以~分隔的选择器，它可以匹配到页面中所有的兄弟元素，比如div~p会匹配到div元素后面的所有p元素。
div ~ p {
color: red;
}
通用兄弟选择器的使用场景不同于相邻兄弟选择器，他可以匹配到多个元素，对按钮组的样式处理就是一个很好的例子。
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<style>
button ~ button {
margin-left: 10px;
}
</style>
12. 并集选择器
并集选择器是以,分隔的选择器，它可以匹配到页面中所有的并集元素，比如div,p、div,p,span等等。
div, p {
color: red;
}
一般是用于给多个元素设置相同的样式，例如鼠标悬停时和选中的样式。
button:hover,
button:active {
color: red;
}
13. 交集选择器
交集选择器是两个选择器中间没有分隔符，它匹配的元素是同一个元素有不同的特性，比如div.active会匹配到div
元素同时拥有active类的元素。
div.active {
color: red;
}
这个选择器在上面的组合选择器中已经有所体现，这里其实还有一个使用场景，就是提升选择器的优先级。
css 选择器优先级
1. 优先级
优先级是指在同一个页面中，当多个选择器同时匹配到同一个元素时，哪个选择器的样式会生效。
一般来书是看css的加载循序的，后加载的css会覆盖前面的css，但是如果css选择器的优先级相同的话，那么就会看css的加载顺序了。
在不考虑!important和属性计算规则的情况下，css选择器的优先级是按照下面的顺序来的。
行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承样式
2. 优先级的计算
优先级的计算可以通过一个四位的数字来表示的，比如0,0,0,0，这个数字的每一位分别代表了不同的优先级，从左到右分别是内联样式、ID选择器、类选择器、标签选择器。
这里有几个注意事项：
- 权重低的选择器不能覆盖权重高的选择器，例如
class选择器不能覆盖id选择器。 - 权重相同的选择器，后面的会覆盖前面的。
!important的优先级最高，不管权重是多少，都会覆盖其他的选择器。style属性的优先级是最高的，不管权重是多少，都会覆盖其他的选择器。
<style>
/* 0,0,0,1 */
div {
color: gainsboro;
}
/*
0,0,0,2 因为有两个标签选择器，所以权重是2
*/
div span {
color: rosybrown;
}
/* 0,0,1,1 */
div .class {
color: greenyellow;
}
/* 0,1,0,0 */
#id {
color: orange;
}
/* 0,1,0,1 */
#id span {
color: blueviolet;
}
</style>
<div style="color: #f5222d;" id="id" class="class">
我是红色，因为style属性的优先级最高
<span>我是蓝紫色，因为id选择器的优先级高于标签选择器</span>
</div>
这个案例建议反复尝试，可以更好的理解优先级的计算，这里有一个在线的优先级计算器
，可以帮助你更好的理解优先级的计算。
总结
css的门门道道有很多，就拿选择器来讲，选择器的使用方式是多变的，选择器的作用就是选择元素，可以选择所有元素，也可以选择元素的某个部分，还可以选择元素的某个状态，这些都是选择器的强大之处。
这次就写这么多吧，下次再写写css的其他选择器，比如伪类选择器、伪元素选择器、属性选择器等等。
