当DOM元素有多个类时css的特殊性

我不得不为具有float：float/left的规则解析html文档集的css。当DOM元素有多个类时css的特殊性

我已经想出了当一组嵌套的DOM元素中的每一个最多只有一个类时，所有东西都是如何工作的。规则的特殊性基于计算出的选择器号码，先是id，然后是class，然后是标签elem。如果有关系，请选择最后的规则。

所以特异性的思想是，至多有一个规则是基于匹配DOM标签元素的选择器的特殊性来选择的。

如果有多个班级，不仅在最深的DOM孩子，而且在父母级别，我该怎么办。简单形式的多个类选择并应用多个规则。但我无法弄清楚确定特异性如何与此相互作用的完整指导原则。例如。通常特异性选择一个规则，最高特异性。但在终端DOM元素中有多个类，在互联网上演示的简单情况下，由多个类选择的多个规则具有相同的特征。但是我可以看到更复杂的情景，不知道如何选择规则。

这里有一个案例：

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

HTML：

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

所有3类报复选定尽管所有3具有不同的特异性号。但是，我可以通过给外层div赋予多个类来使问题变得更糟。尽管有特殊性，但在css 2.1规范中找不到任何信息，说明应该发生什么，以及多个类如何选择多个规则。

Andy

来源

2011-04-13 Andy Nuss

你忘了'！important'，它增加了一个全新的规则级别。 – Khez 2011-04-13 21:00:37

在下面添加更新。我希望这有帮助。 – 2011-04-14 14:45:48

确定您实际要求的内容有点困难。一个具体的例子会有帮助。

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

内联样式
包括样式（同一文件）
外部引用的样式

内的所有那些，上市last的风格具有更高的优先级，假设特异性是相同的。但是，优先级较高的样式（例如内联样式）总是会覆盖其他类型，而不考虑其特性。因此，元素上的内联样式将始终覆盖所包含样式表中的样式。

这里的更多信息，你可能已经知道的特异性... http://www.htmldog.com/guides/cssadvanced/specificity/

一组嵌套选择器的实际特殊性需要一些计算。基本上，你给每个 ID选择器（“＃无论”）的值为 100，每个类选择器（“.whatever”）的值为10和每个 HTML选择器（“无论”）的值为 1。然后你把它们全部加起来，然后嘿，你具有的特异性值。

这一切都已经表示，!important地方添加规则同样适用其他层，只是!important给予优先于所有非!important风格。

更新：你的例子有点好奇，我认为你误解了特异性。特定性而不是表示适用于与另一个类相同的元素的类完全覆盖它。这意味着“如果有风格属性是相同的，那么具有更高特异性的风格将覆盖其他风格属性。”

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

也许它会帮助把它想像为分配任何旧对象的变量。有多种方法可以引用变量，但是您的特性定义了您的执行顺序。最后设置变量的分配是对象实际呈现时的情况。

来源

2011-04-13 21:01:24

你说的很好，我已经实施的规则。但是，当涉及到具有多个类的标签时，我迷失了方向。在这种情况下，不知何故，多个规则被选中，并且不知何故不清楚。 I.E.我已经看到了多个具有不同特性的规则。 – 2011-04-13 23:40:43

你能更新你的帖子来提供一个具体的例子吗？ – 2011-04-14 01:23:37

谢谢，我更新了 – 2011-04-14 04:17:55

每个选择器的所有规则都适用，除非有冲突。所以，如果你有这些样式：

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的胜出是因为特殊性，其他款式都适用，因为没有冲突。

来源

2011-04-14 04:40:44 Faust

当DOM元素有多个类时css的特殊性

回答

相关问题