css选择器的优先级

        一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用 100 表示 ID选择器的优先级。比如.polaris span的选择器优先级是 10 + 1 也就是11；而 .polaris 的优先级是10。计算后的数值越大优先级越高。

使用在标签内引入 CSS 的方式优先级是最高的，我们给它的优先级是 1000。

权值划分：

• 第一等级：代表内联样式，style=""，权值为1000
• 第二等级：代表ID选择器，如#id，权值为100
• 第三等级：代表类，伪类和属性选择器，如.content，权值为10
• 第四等级：代表标签选择器和伪元素选择器，如div p，权值为1

常见权重优先级如下:

1. !important。在属性后面使用该关键字可覆盖任何其他样式
2. 内联样式
3. id选择器，如#id
4. 类选择器、属性选择器（[attribute]）、伪类选择器（a:hover）
5. 标签选择器、伪元素选择器（::before）
6. 通配选择器（*）
7. 继承

对于什么情况下使用什么选择器，用不同选择器的原则是：

1. 准确的选到要控制的标签；
2. 使用最合理优先级的选择器；
3. HTML 和 CSS 代码尽量简洁美观。通常：

        ①最常用的选择器是类选择器。

        ②li、td、dd等经常大量连续出现，并且样式相同或者相类似的标签，我们采用类选择器跟标签名选择器结合的后代选择器  .xx li/td/dd {}  的方式选择。

        ③极少的情况下会用 ID 选择器，当然很多前端开发人员喜欢 header，footer，banner，conntent 设置成 ID 选择器的，因为相同的样式在一个页面里不可能有第二次