为什么我不能打多个班级的ID？

Question

可能重复:
CSS特异性的要点

这是我的意思的一个例子:

http://jsfiddle.net/BTJXt/9/

不知何故,1个ID将击败看似无限数量的类.这是如何计算的？

<style>
    div {
    height:200px;
    width:200px;
    }

    #big .little {
    /* Specificy value = 110 */
    background-color:red;
    }

     #big .little.little {
    /* Specificy value = 120 */
    background-color:blue;
    }

    .little.little.little.little.little.little.little.little.little.little.little.little.little {
    /* Specificy value = 130, why doesn't this win? */
    background-color:green;
    }


</style>   

<div id="big">
    <div class="little"></div>
</div>?

Answer 1

简单地说:ID总是会击败任意数量的类,伪类,属性选择器或类型选择器,但不一定是另一个ID.这就是你需要记住的一切.

或者进入技术细节:特殊性不计入我们都使用的一些十进制数字基数.ID不值"100分",类/属性/伪类不是"10分",类型/伪元素不是"1分"等.你不要添加这些数字并比较它们,数学上,根据他们的总和 ; 这不是它的工作原理.(您确实将ID的个别数量,类/属性/伪类的数量等加起来,但您不会将所有单个数字添加到一个总数中.)

这些简单选择器的特异性以相当不同的方式计算.该规范最说它:

9.计算选择器的特异性

选择器的特异性计算如下:

• 计算选择器中ID选择器的数量(= a)
• 计算选择器中的类选择器,属性选择器和伪类的数量(= b)
• 计算选择器中类型选择器和伪元素的数量(= c)
• 忽略通用选择器

否定伪类中的选择器与任何其他选择器一样,但是否定本身不算作伪类.

连接三个数字abc(在具有大基数的数字系统中)给出了特异性.

例子:

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

请注意,它表示"连接"(如连接字符串),而不是"添加"(如2 + 2 = 4的算术意义).

另请注意,它表示"具有大基数的数字系统"; 这只是为了说明你没有把这些特殊性得分作为十进制数,其中13×10 = 130大于1×100 = 100的外行人的术语.

这是计算选择器特异性的方法:

/* 1 ID, 1 class     -> specificity = 1-1-0 */
#big .little

/* 1 ID, 2 classes   -> specificity = 1-2-0 */
#big .little.little

/* 0 IDs, 13 classes -> specificity = 0-13-0 */
.little.little.little.little.little.little.little.little.little.little.little.little.little

现在注意第三个选择器的特异性是如何小于前两个,因为没有使用ID选择器？

当比较其他两个选择器时,每个选择器都有一个ID选择器,你会看到第二个选择器还有一个类.在这种情况下,第二个选择器由于额外的类选择器而获胜,即使每个选择器都有一个ID选择器,因为ID选择器本身具有相同的特异性.