CSS规则特异性 [英] CSS rules specificity

问题描述

我如何计算CSS中的规则特异性？我知道基本的东西（样式为1000，id为100，att / class为10等）。但是，我仍然陷入了太多困难，例如：

 < div class =wrapper> 
< div class =inner>< / div> 
< / div> 
 .wrapper> div / * ??? * / 
 .inner / * 10 * / 
  

第一条规则显然适用。但是有多少？

解决方案

基本上，就像这样： $ b

• ！important 样式总是覆盖所有其他样式，但是在！之间！重要样式，特殊性规则适用


• 内联样式获得1000特异性点


• ID获得100分


• （伪）类和属性选择器获得10分


• 标签选择器获得1分


• 如果选择器具有相同的特性，则页面上最后定义的规则将会覆盖其他规则。


• 通用选择器 *
  
  
  

  另外，本网站可能对您有用。它进一步解释了这点。

  
  
  

  在为自己测试这些规则后，我注意到这不完全正确。特定的应用顺序仍然适用，但通过这个测试，它不是真的，它实际上与这个积分系统一起工作，就像我所知道的大多数网站一样。看起来更准确的是把样式放在盒子中。它仍然使用上面列出的框的顺序，而是对每个框进行计数，并且如果该组中有相同数量的选择器，请检查下一个。它会像这样工作：
  
  

  
  
  • ！important 样式位于方框1中。这些样式覆盖所有其他样式。如果有多个具有！important> 规则的相同样式的声明，则会查看下一个最高框中的样式。
  
  
  • 内联样式位于方框2中。内联样式将覆盖所有其他样式。如果内联样式有多个声明，则最后定义的一个将应用。
  
  
  • ID选择器位于方框3中。如果存在多个相同样式的声明，并且具有相同数量的ID
  
  
  • （伪）类和属性选择器在方框4中。我想你会得到这个故事，当有多个相同的样式与这个选择器的等量...
    
  • 标签选择器在方框5中。...
  
  
  • 通用选择器在方框6中。尽管这个框的行为有点不同，因为添加更多的通用选择器并不会增加特异性，可以看到这里，所以只有定义的顺序适用于此框。不过，应用了通用选择器的样式 do 会覆盖继承样式。
  如果没有样式直接指定给元素，则可能会应用继承样式，具体取决于样式它是。
  
  
  
  

  因此，基本上，如果我们在样式表的顶部有一个id选择符的样式，有超过10个类选择器，id选择器的样式仍然适用。在方框3中，id选择器的样式赢得了战斗，所以进一步的方框被忽略。 特异性计算器FabrícioMatté的链接说明非常好。

  
  
  < PS：使用 + 或> 或〜或任何其他运营商不会影响特异性。这些样式具有完全一样的特异性（所以后者将适用）：
  
  

    div> span {color：red;} 
   div span {color：blue;} 
    

  
  

  How can I count the rule specificity in CSS? I know the basic things (1000 for style, 100 for id, 10 for att/class, etc.) However, I still get stuck too many times with simple things, example:

  How much would this be?

  <div class="wrapper">
      <div class="inner"></div>
  </div>
  .wrapper > div /* ??? */
  .inner /* 10 */
  

  The first rule is applied, obviously. But how much is it?

  解决方案

  Basically, it's like this:

  • !important styles always override all other styles, but amongst !important styles, specificity rules do apply
  • Inline styles get 1000 "specificity" points
  • IDs get 100 points
  • (pseudo-)classes and attribute selectors get 10 points
  • tag selectors get 1 point
  • If there are selectors with equal specificity, the rule that is defined last on the page will override the other rules.
  • The universal selector * and inherited styles gets no specificity points.

  Also, this site might be useful for you. It explains it a bit further.

  After testing these rules for myself, I've noticed that this is not exactly true. The order in which the specificity is applied does still hold true, but going by this test, it is not true that it actually works with this points system like most sites I know claim. What seems to be more accurate is putting the styles in "boxes". It would still use the order of "boxes" I listed above, but instead count each "box", and if there is an equal amount of selectors in that group, check the next one. It would then work like this:

  • !important styles are in box 1. These styles override all other styles. If there are multiple declarations of the same style that both have the !important rule, then the style in the next highest box will be looked at.
  • inline styles are in box 2. Inline styles will override all other styles. If there are multiple declarations of inline styles, the one defined last will apply.
  • ID selectors are in box 3. If there are multiple declarations of the same style, with the same amount of ID selectors, the next highest box will be looked at.
  • (pseudo-)classes and attribute selectors are in box 4. I think you get the story what happens when there are multiple of the same style with an equal amount of this selector...
  • tag selectors are in box 5. ...
  • universal selectors are in box 6. This box behaves a bit differently though, since adding more universal selectors does not increase specificity, as can be seen here, so only the order of definition applies in this box. Styles applied with an universal selector do override inherited styles though.
  • If no styles have been assigned directly to the element, inherited styles might apply, depending on what style it is.

  So basically, if we have a style with 1 id selector at the top of our stylesheet, and below that a style with more than 10 class selectors, the style with the id selector will still apply. The style with the id selector "won the battle" in box 3, so the further boxes are ignored. The specificity calculator Fabrício Matté linked to illustrates really well.

  PS: using + or > or ~ or any other operator won't affect specificity at all. These styles have exactly as much specificity (so the latter will apply):

  div > span {color:red;}
  div span {color:blue;}
  

  这篇关于CSS规则特异性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！