为什么这个11类选择器没有ID那么具体？ [英] Why is this 11 class selector less specific than the ID?

问题描述

  #box {
 width：100px; 
高度：100像素； 
 background-color：＃ff0; 
} 
 
 .one.two.three.four.five.six.seven.eight.nine.ten.eleven {
 background-color：＃f00; 
} 
 
 
< div id = box class = one二，三，四，五，六，七，八，九，十一，十一点< / div> 
  

如果对每种类型的选择器都给出了以下几点，那么上面的类选择器怎么不覆盖ID选择器？

样式属性：1,0,0,0
ID：0,1,0,0
类，伪-class，属性选择器：0,0,1,0
元素：0,0,0,1

解决方案

因为

逗号提醒您我们认为这并不是真正的基础10系统，因为从技术上讲，您可以将特异性值设置为0、1、13、4，并且 13不会像基础10系统那样溢出。

您的ID选择器是 0,1,0,0 ，而您的组合的类选择器为 0,0,11,0 。

任何时候，类选择器的任何组合 ever 会覆盖单个ID选择器，如下所示：

  #box {width：100px;高度：100px；背景颜色：＃ff0; / *黄色* /}。one.two.3.four.five.six.seven.eight.nine.ten.eleven {background-color：＃f00; / *红色* /}  

 < div id =框 class = one二三四五六七七八九十一十一< / div>  

#box {
  width: 100px;
  height: 100px;
  background-color: #ff0;
}

.one.two.three.four.five.six.seven.eight.nine.ten.eleven {
  background-color: #f00;
}


<div id="box" class="one two three four five six seven eight nine ten eleven"></div>

If the following points are given to each type of selector, then how come the above class selector does not override the ID selector?

Style attribute: 1,0,0,0 ID: 0,1,0,0 Class, pseudo-class, attribute selector: 0,0,1,0 Element: 0,0,0,1

解决方案

Because the CSS specificity point system is exactly as you have specified:

• Style attribute: 1,0,0,0
• ID: 0,1,0,0
• Class, pseudo-class, attribute selector: 0,0,1,0
• Element: 0,0,0,1

The commas are there to remind us that this isn't really a "base 10" system, in that you could technically have a specificity value of like 0,1,13,4 - and that "13" doesn't spill over like a base 10 system would.

Your ID selector is 0,1,0,0, and your combined class selector is 0,0,11,0.

At no point will any combination of class selectors ever override a single ID selectors, as is seen in the following:

#box {
  width: 100px;
  height: 100px;
  background-color: #ff0; /* yellow */
}

.one.two.three.four.five.six.seven.eight.nine.ten.eleven {
  background-color: #f00; /* red */
}

<div id="box" class="one two three four five six seven eight nine ten eleven"></div>

这篇关于为什么这个11类选择器没有ID那么具体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！