Question

关于加载CSS文件和重写类的顺序有很多问题，但在阅读之后我仍然有一些我无法弄清楚的东西。

有两个CSS文件：

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

按此顺序加载（我检查过）。

HTML 如下所示：

<div class="div_D1 ov_D1">
    <div class="div_D2 ov_D2">
        <div class="div_D3 ov_D3">
            blablah
        </div>
    </div>
</div>

Standard.css 包含：

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

Override.css 包含：

.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 
    }

诀窍。所以有解决方案，我只能理解为什么单个选择器的加载顺序是受到尊重的，而多个选择器则没有。

Answer 1

这称为选择者的特异性。来自Ian Pouncey和Richard York的书Beginning CSS: Cascading Style Sheets for Web Design, Third Edition：

除了样式表优先级之外，每个样式表中包含的选择器都存在一个优先顺序。    此优先级取决于选择器的具体方式。    例如，ID选择器是最具体的，   而通用选择器是最通用的。在这些之间，   选择器的特异性使用以下公式计算：


如果从（X）HTML样式属性应用样式，则计数1，否则为0;这变得可变a。

计算选择器中ID属性的数量;总和是变量b。

计算选择器中的属性，伪类和类名的数量;总和是变量c。

计算选择器中元素名称的数量;这是变量d。

忽略伪元素。

现在取四个值并将它们组合成四个一组。

例如：

选择器：div.someclass.someother

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

<强>特异性：          0,0,2,1，（a = 0，b = 0，   c = 2，d = 1）

Answer 2

在CSS中，存在特异性规则（quoted from MDN）：

以下选择者列表是通过提高特异性来实现的：


通用选择器

类型选择器

班级选择器

属性选择器

伪类

ID选择器

内联样式

由于您已经为选择器添加了特异性，因此无法通过普通的CSS类选择器覆盖。

所以你的代码

.div_D1 .div_D3比.div_D3更具体，且不如.div_D3.ov_D3更具体。

JS Fiddle

Answer 3

As per MDN CSS选择器具有称为“特异性”的规则，用于确定其优先顺序。规则越具体，无论在/某些样式表中的位置如何，它的优先级就越高。

诸如.class-1 .class-3之类的规则具有高于.class-3的特异性（更具体）并优先，因此不太具体的规则不能覆盖它使用!important否定所有其他特殊性规则。但是，使用更高的特异性规则只会发生冲突的样式。

所以，你已经设定了规则：

.div_D1 .div_D3 { }

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

.ov_D3 { }

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

因此，.ov_D3成为：

.div_D1 .ov_D3

或

.ov_D1 .ov_D3

此处示例：JS Fiddle

覆盖组合的CSS类

3 个答案: