1

可能的重复：
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>​
4

1 回答 1

14

简单地说：一个 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 选择器本身共享相同的特异性。

于 2012-03-02T21:06:54.037 回答