前言
css选取器的权重问题看似简单，然则倘若出错，想要找到出错的原由可是不易的。本文详细介绍css选取器权重，期盼对你有所帮忙。
选取器的种类!important内联样式ID选取器class选取器元素选取器通配符选取器权值和权级的概念
咱们能够经过给选取器添加权值和权级这两个概念的方式来更好的理解选取器的权重 （重视:“权值”和“权级”的概念是为了更好的理解权重而提出的，并不是真是存在的)
选取器的权重
有了权值和权级的概念以后，咱们就能够参考表格来对元素的权重进行理解。 选取器的权重能够相加，例：
span的权值为 = id选取器100+类选取器10+元素选取器1 = 111
权值相同期
因为HTML代码的执行特点时从上往下执行，因此呢在权值相同的状况下，后面的选取器会覆盖前面的选取器相同的属性 例：
两个类选取器同期选中div元素，且color属性出现冲突，此时生效的是后面的class2，因此呢元素的前景色为蓝色
权值区别时
两种选取器覆盖了同一属性，此时权重高的选取器生效。
例：
当前形况下，元素选取器的权值为1，大于通配选取器的权值0，因此呢对div生效的样式应该是元素选取器里的样式。
权值跃迁
权值跃迁讨论的问题是，当有11个元素选取器和1个类选取器同期选中同一元素时，哪个选取器的样式会生效。
结论是：权级高的选取器的样式会生效。
理解方式1
由于权值不可跃迁，亦就寓意着没论有多少个0级的选取器，生效的仍然是1级选择器，因 为选取器的权级没法跃迁。
理解方式2 CSS里面的进制并不是10进制，而是256进制，因此10个低级选取器并不可等于1个高级选取器
其他选取器
伪类选取器属性选取器
伪类选取器和属性选取器的权重相当于类选取器的权重，权级为2级。伪元素选取器
伪元素选取器的权重相当于元素选取器的权重，权级为1级。子代选择器后代选取器 子代和后代有可能是元素选取器、类选取器、id选取器，因此呢要按照详细状况来详细分析。结语
以上便是本篇关于css选取器权重问题的所有内容了，倘若有不正确的地区，欢迎大众指正。倘若爱好麻烦点个赞~
| 
发表于 2024-6-30 06:44:52
