08-05 08:55 阅读 78

CSS选择器优先级的学习与应用

选择器优先级

选择器优先级是CSS初学者必须掌握的要点，掌握了优先级就能轻松得掌控全局的样式变化，下面我将从概念，基础优先级，优先级计算三个方面来带读者轻松掌握CSS选择器优先级

在使用不同选择器对元素添加样式的时候会造成样式冲突现象，即使用不同类型的选择器对某个标签赋予相同的样式属性但不同的属性值，而冲突的原因常常就是选择器优先级造成的，除了选择器优先级会造成样式冲突之外，我们还可以使用其特性来处理我们的样式

* {     margin:0px;     padding:0px; } .box {     margin:10px } 复制代码

上面的例子就比较常见，我们一般先使用通配符选择器对外边距和内边距进行初始化，再进行个别元素附加边距，下面我带读者一一列举各个选择器的优先级

优先级划分为六个，分别为：通配符选择器，标签选择器，类选择器，ID选择器，内联样式， !import，下面来分别介绍一下六种等级的特性。

通配符选择器一般用于全局元素的属性初始化，比如进行一个内边距和外边距的初始化，设置为0，优先级记为0级

* {     margin:0;     padding:0; } 复制代码

标签选择器一般常用于各个固有元素的样式预设，比如说盒子，链接等等，优先级记为1级。

a {     color:pink; } 复制代码

类选择器是非常常用的，经常和标签选择器搭配使用，优先级记为2级。

. a-red {     color:red } 复制代码

ID选择器，不常用，在选择器的设计中要正确使用ID选择器，不是很推荐去使用ID选择器去赋予样式，因为其主要的是为了方便获取DOM元素，且其优先级过高，频繁使用会导致样式优先级混乱，优先级记为3级。

#main {  } 复制代码

内联样式，内联样式也不是很常用，尽管优先级很高也不会接触到选择器的范畴，优先级记为4级。

<div style="width: 100px;"></div> 复制代码

切勿滥用 ! important，我们仅仅可以在重置样式中去使用他，其优先级为5级

6种样式的优先级了解到这里，但是掌握到这里还不行，还需要学会优先级计算才能灵活控制样式不会紊乱。

了解单个优先级，但是开发中选择器是经常进行组合使用的，所以必须使用优先级计算来判断优先级大小

我们通过数值计算来计算每个样式的优先级大小，就是根据上面的各个基础选择器的优先级得到各个选择器的权重值，再将其相加，得到最后的权重值，依靠该权重值来对元素赋予样式。

各个选择器的优先级对应的权重值以指数形式递增，通配符的权重值为0，标签选择器的权重值为1，类选择器的权重值为10，以此类推。

比如下面的样式，我们来计算一下

.box div {      } 复制代码

计算一下其权重值，类选择器的权重值为10，标签选择器的权重值为1，所以最后得到的权重值为11，权重值高的样式会覆盖掉权重值低的相同样式属性

我用码上掘金来展示一下优先级的效果

上面我分别用使用标签选择器，标签和类选择器组合，由于标签和类选择器组合的权重值高于只使用标签选择器，所以最后的文字颜色是蓝色。

那么如果权重值相同的情况会怎么样，那么就会采取后来居上的原则，即后面的样式会覆盖掉前面相同的样式属性

这里是验证后来居上原则，分别使用相同的选择器组合，使其权重值相同都为11，所以最后的文字样式遵循最后赋予的样式，为红色。

作者：猪痞恶霸
链接：https://juejin.cn/post/7128035091468517390
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。