重写组合css类

关于加载CSS文件和重写类的顺序有很多问题，但是在阅读了它们之后，我仍然有一些我不能理解的问题

有两个CSS文件：

<link rel="stylesheet" href="standard.css" type="text/css">
<link rel="stylesheet" href="override.css" type="text/css">

Override.css包含：

.div_D1{
    background: white;
    }
.div_D2{
    height: 10px;
    }
.div_D1 .div_D3{
    padding-left: 20px;
    }

.ov_D1{
    background: red;
    }
.ov_D2{
    height: 50px;
    }
.ov_D3{
    padding-left: 0px;
    }

.ov_D1和.ov_D2应用正确：.div_D1的背景为红色，.div_D2的高度为50px

另一方面，ov_D3的行为与我预期的不一样。如果我查看应用规则的顺序，浏览器首先应用.ov_D3，然后是.div_D1.div_D3，留下一个不需要的20px填充

但是，如果我将Override.css中的类选择器更改为

.div_D1.ov_D3它确实移除了填充物

还将css更改为

.ov_D3{
    padding-left: 0px; !important 
    }

---

这就是诀窍。所以有一些解决方案，我只是不明白为什么一个选择器的加载顺序得到尊重，而多个选择器的加载顺序却没有得到尊重。

在CSS中，有一些特定性规则：

以下选择器列表是通过增加特异性来实现的：

通用选择器 类型选择器 类选择器 属性选择器 伪类 ID选择器 内联样式 因为您已经为选择器添加了特殊性，所以无法用普通的CSS类选择器覆盖

所以你的代码

.div_D1.div_D3比.div_D3更具体，而比.div_D3.ov_D3更不具体

---

这称为选择器的特异性。伊恩·庞切伊和理查德·约克的书：

除了样式表优先级之外，每个样式表中包含的选择器都有一个优先级顺序。 此优先级由选择器的具体程度决定。 例如，ID选择器是最具体的， 通用选择器是最通用的。在这两者之间 选择器的特异性使用以下公式计算：

如果从XHTML样式属性应用样式，则计数1，否则计数0；这将成为变量a。 计算选择器中ID属性的数量；总和是变量b。 计算选择器中属性、伪类和类名的数量；总和是变量c。 计算选择器中元素名称的数量；这是变量d。 忽略伪元素。 现在取这四个值，并将它们分成四组

例如：

选择器：div.someclass.someother

选择器类型：元素名+类名+类名

特异性： 0,0,2,1，a=0，b=0， c=2，d=1

CSS选择器具有称为“特异性”的规则，这些规则决定了它们的优先顺序。规则越具体，它的优先级就越高，无论它在某个/某些样式表中的位置如何

像.class-1.class-3这样的规则有一个特殊性，它比.class-3更具体，并且优先，因此，不太具体的规则不能不使用！重要，它否定了所有其他的特殊性规则。然而，使用更高的特殊性规则只会在样式冲突的情况下发生

因此，您已经设置了规则：

.div_D1 .div_D3 { }

上述规则比以下规则更具体：

.ov_D3 { }

即使它们针对相同的元素，具有更高特异性的规则优先。您可以在JS FIDLE中通过预先设置上面定义的适当类结构来解决这个问题

因此，.ov_D3变为：

.div_D1 .ov_D3

或

---

此处示例：

如果您从其他地方复制文本，则需要直接确认来源。指向无关文章的引用链接不计算在内。看见

.div_D1 .ov_D3

.ov_D1 .ov_D3