Question

我必须解析那些有浮动的规则的html文档集的CSS：left / right。

当有一组嵌套的DOM元素时，我已经弄清楚了一切是如何工作的，每个元素最多只有一个类。规则的特殊性基于计算的选择器编号，首先是id，然后是类，然后是标签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规范中找到任何有关应该发生什么的信息，以及多个类如何选择多个规则，尽管具有特异性。

安迪

Answer 1

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

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

内联样式
包含的样式（同一文档）
外部引用的样式

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

以下是您可能已经了解的有关特异性的更多信息...... http://www.htmldog.com/guides/cssadvanced/specificity/

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

这一切都已经说过，!important添加了另一个适用相同规则的图层，只有!important优先于所有非!important样式。

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

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

也许将它想象为在任何旧对象上分配变量都会有所帮助。引用变量有多种方法，但您的特异性定义了您的执行顺序。最后设置变量的赋值是实际渲染对象时的赋值。

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由于特异性而胜出，其他风格都适用，因为没有冲突。

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

2 个答案: