详解CSS优先级规则的级别与细节

灰太狼 2022-08-10 05:50 210阅读 0赞

CSS样式定义多了，常常出现显示效果与预期不一致的情况。其中很大一部分原因在于起作用的样式。

1。多个选择器可能会选择同一个元素，有3个规则，从上到下重要性降低：  
      ！important的用户样式  
      ！important的作者样式  
      作者样式  
      用户样式  
      浏览器定义的样式  
  
2。CSS样式的特殊性权重——谁有分量，谁说了算。  
CSS规范为不同类型的选择器定义了特殊性权重，特殊性权重越高，样式会被优先应用。  
权重设定如下：  
html选择器，权重为1；  
类选择器，权重为10；  
id选择器，权重为100；  
这里还有一种情况：在html标签中直接使用style属性，这里的style属性的权重为1000；  
即如下情况：  
\#x34y \{color:red\}  
<.  p id=x34y style="color:green">  优先选择style=""设定的样式。  
其他类型的，大家看看例子就明白了。  
例子：  
h1\{color:blue\}  权重为1  
p  em\{color:yellow\}  权重为2  
.warning\{color:red\}  权重为10  
p.note em.dark\{color:grag\}  权重为22  
\#main\{color:black\}  权重为100     这里还有一种情况：  
权重一样时如何处理？权重一样时就另说了。看看下面的就明白了。

3。CSS样式的层叠原则——谁离我近，谁说了算。  
当权重一样时，会采用“层叠原则” 后定义的会被应用。  
如：p\{color:yellow\}  
        p\{color:red\}  
作用到这里   <. p >我的什么颜色呢？< /p>  
结果会是red的。

4。CSS样式的特殊标记——谁有特权，谁说了算。  
如果有人看不顺眼，非得要自己说了算，那可以搞点特权，如下即可  
p \{color:blue !important;\}  
加上!important;可将自己权重设为最高。

详解**CSS优先级的读法**，CSS优先级包含四个级别（文内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。  
  
　　对优先级的读法，应该是以“组”来分，这个组之间相互独立，从左到右进行对比。它们成组出现，以逗号分隔。  
　　selector( a , b , c , d )  
　　compare: ↑ , ↑ , ↑ , ↑  
　　selector( a , b , c , d )  
　　正如w3c.org中原文所示，分为a,b,c,d四组，全为正整娄，默认为0，对应于不同的选择器结构和组成形式。在选择器之间的优先级进行对比时，从左到右1对1对比，当比出有大者时即可停止比较。  
li.red.level \{\} /\* a=0 b=0 c=2 d=1 -> specificity = 0 , 0 , 2 , 1 \*/  
/\*compare ↑ , ↑ , √ \*/  
h1 + \*\[rel=up\]\{\} /\* a=0 b=0 c=1 d=1 -> specificity = 0 , 0 , 1 , 1 \*/  
/\*compare ↑ , ↑ , ↑ , √ \*/  
ul ol li.red \{\} /\* a=0 b=0 c=1 d=3 -> specificity = 0 , 0 , 1 , 3 \*/  
/\*compare ↑ , ↑ , √ \*/  
\#x34y \{\} /\* a=0 b=1 c=0 d=0 -> specificity = 0 , 1 , 0 , 0 \*/  
/\*compare ↑ , √ \*/  
style="" /\* a=1 b=0 c=0 d=0 -> specificity = 1 , 0 , 0 , 0 \*/  
  
　　(上表中，↑表示还要进行比较，√表示从此处已得到了结果)  
　　**再有，只要正确书写，仅从优先级中大概知道选择器结构形式了**，如：  
　　1,0,0,0表示是元素内的style；  
　　0,2,1,1表示是一个由两个ID选择器，1个类或伪类或属性选择器，以及一个元素选择器组成的选择器。  
　　CSS优先级规则的细节：  
　　在纠正读法后，才能开始讲详细的规则：  
　　a组数值只有把CSS写进style属性时才会为1,否则为0.写进style的样式声明其实不算是个选择器，所以这里面的b,c,d组值均为0，只有真正的选择器才会有b,c,d组值。  
　　b组数值决定于ID选择器\#ID，有多少个ID选择器，并会进行此组数值累加；  
　　c组数值决定于类、伪类和属性选择符，并会进行该组数值累加；  
　　d组数值决定于元素名，即元素选择器，并会进行该组数值累加；  
　　注意，这四组数值分别对应于不同类型的选择器，互不影响，根据读法法则进行比较。  
　　这里没有讨论到!important，就近原则和继承，也没有实例代码，欢迎大家来webjx.com共同讨论！  
　　下面是列子：CSS优先级问题  
　　CSS优先级包含四个级别（文内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS的优先级。  
**CSS优先级的计算规则如下：**  
    \* 页面中定义的样式,加1,0,0,0  
    \* 每个ID选择符(如 \#id),加0,1,0,0  
    \* 每个Class选择符(如 .class)、每个属性选择符(如 \[attribute=\])、每个伪类(如 :hover)加0,0,1,0  
    \* 每个元素选择符（如p）或伪元素选择符(如 :firstchild)等，加0,0,0,1  
　　然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，  
　　然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。