DOM元素具有多个类时的css特异性

Question

我必须为那些具有float:left/right的规则解析html文档集的css。

我已经弄清楚了当有一组嵌套的DOM元素，每个元素最多有一个类时，一切是如何工作的。规则的特异性基于计算的选择器数量，首先是id，然后是class，然后是标签elem。如果是平局，选择最后出现的规则。

因此，特异性的概念是，在匹配DOM标记元素时，最多只能根据选择器的特异性选择一个规则。

如果有多个类，不仅在最深的DOM子级，而且在父级，我该怎么办。简单形式的多个类选择并应用多个规则。但我就是找不出一套完整的指导方针来确定特异性如何与此相互作用。例如，通常特异性选择一个规则，最高特异性。但是，对于终端DOM元素中的多个类，在internet上演示的简单情况下，由多个类选择的多个规则具有相同的特异性。但我可以看到更复杂的场景，不知道如何选择规则。

下面是一个案例：

p.cls1 {
}
div#id1 p.cls2 {
}
.cls3 {
}

Html：

<div id="id1"><p class="cls1 cls2 cls3">...

所有3个类别都被选中，即使所有3个类别都有不同的特异性数字。但是，我可以通过给外部div提供多个类来使问题变得更糟。在CSS2.1规范中找不到任何信息来说明应该发生什么，以及多个类如何选择多个规则，尽管这些信息很具体。

安迪

Answer 1

要确定您在这里实际问的是什么有点困难。一个具体的例子会有所帮助。

但一般来说，样式优先级从最高到最低的顺序是：

引用内联styles

• Included样式的

1. (与

引用的样式相同

在所有这些中，假设特异性是相同的，last中列出的样式具有更高的优先级。但是，处于较高优先级的样式(例如内联样式)将始终覆盖其他样式，而不考虑其特殊性。因此，元素上的内联样式将始终覆盖所包含的样式表中的样式。

这里有更多的信息，你可能已经知道了具体的.http://www.htmldog.com/guides/cssadvanced/specificity/

一组嵌套选择器的实际特异性需要进行一些计算。基本上，你给每个id选择器(“任何东西”)一个值100，每个类选择器(".whatever")一个值10，每个超文本标记语言选择器(“任何东西”)一个值1。然后你把它们加起来，嘿，你就有了特定值。

话虽如此，!important增加了另一个同样适用规则的层，只是!important优先于所有非!important样式。

更新:你的例子有点奇怪，我认为你误解了细节。not意味着一个类与另一个类应用于相同元素的类完全覆盖了它。相反，它的意思是“如果存在相同的样式属性，则具有较高特异性的属性将覆盖其他属性。”

在您的示例中，cls2上匹配任何其他类样式的属性将覆盖它们。但是，如果没有样式冲突，就没有问题！它只需要所有的风格。

也许把它想像成在任何旧对象上赋值变量会有所帮助。可以通过多种方式引用变量，但您的特殊性决定了您的执行顺序。设置变量last的赋值是对象实际呈现时的赋值。

Answer 2

除非存在冲突，否则将应用每个选择器的所有规则。所以如果你有这些风格：

p.cls1 {
    margin: 10px;
    padding: 3px
}

div#id1 p.cls2 {
     margin :5px;
     background:green;
}

.cls3 {
     margin :20px;
     position:relative
}

然后，您的DOM元素将以如下形式结束：

{ margin:5px; padding:3px; background:green; position:relative; }

边距:5px胜出是因为它的专用性，其他风格都适用，因为没有冲突。