Question

我想弄清楚为什么我的一个css类似乎覆盖了另一个（而不是相反）

这里我有两个css类

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}

.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

在我看来，我打电话给

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox ">

字体（重叠元素）显示为10px而不是20 - 有人可以解释为什么会这样吗？

Answer 1

有几条规则（按此顺序应用）：

内联css（html样式属性）覆盖样式标记和css文件中的css规则
更具体的选择器优先于不太具体的选择
如果两者具有相同的特异性，那么稍后出现在代码中的规则会覆盖之前的规则。
!important的css规则始终优先。

在您的情况下，适用的规则3。

从最高到最低的单选择者的特异性：

ids（例如：#main选择<div id="main">）
类（例如：.myclass），属性选择器（例如：[href=^https:]）和伪类（例如：:hover）
元素（例如：div）和伪元素（例如：::before）

为了比较两个组合选择子的特异性，比较上述每个特异性组的单个选择子的出现次数。

示例：将#nav ul li a:hover与#nav ul li.active a::after

计算id选择器的数量：每个选择器都有一个（#nav）
计算班级选择器的数量：每个选择器的数量（:hover和.active）
计算元素选择器的数量：第一个（ul li a）有3个（ul li a ::after），第二个（{{1}}）有4个，因此第二个组合选择器更具体。

A good article about css selector specificity

Answer 2

首先，基于您的@extend指令，您似乎并未使用纯CSS，而是使用SASS os Stylus等预处理器。

现在，当我们谈论＆＃34;优先顺序＆＃34;在CSS中，有一个通用规则：在之后设置其他规则（以自上而下的方式）应用。在您的情况下，只需在.smallbox之后指定.smallbox-paysummary，您就可以更改规则的优先顺序。

但是，如果你想更进一步，我建议你阅读：CSS cascade W3C specification。您会发现规则的优先级基于：

当前媒体类型;

重要性;

来源;

选择器的特异性，最后是我们众所周知的规则：

后者指定了哪一个。

Answer 3

这是图中CSS样式顺序的汇编，其中CSS规则具有更高的优先级，并且优先于其余规则：

免责声明：我和我的团队将这篇文章与博客文章（https://vecta.io/blog/definitive-guide-to-css-styling-order）结合在一起，认为对所有前端开发人员都很方便。

希望有帮助！：）

Answer 4

AS是W3的州： W3 Cascade CSS

应用不同样式表的orden如下（引自W3级联部分）：

用户代理声明
用户正常声明
作者正常声明
作者重要声明
用户重要声明

在推荐的W3文件中有关此内容的更多信息

Answer 5

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

内联css（html样式属性）覆盖样式标记和css文件中的css规则

更具体的选择器优先于不太具体的选择器。

如果两者具有相同的特异性，则代码中稍后出现的规则会覆盖之前的规则。

Answer 6

类在html元素中出现的顺序无关紧要，重要的是块在样式表中的显示顺序。

在您的情况下，.smallbox-paysummary在.smallbox之后定义，因此优先级为10px。

Answer 7

我们在这里看到的被称为{strong>特异性，如Mozilla所述：

特异性是浏览器决定哪个CSS属性的方式   值与元素最相关，因此将是   应用。特异性基于组成的匹配规则   不同种类的CSS选择器。

Specificity是应用于给定CSS声明的权重，   由匹配中每种选择器类型的数量决定   选择器。当多个声明具有相同的特异性时，最后一个   在CSS中找到的声明将应用于该元素。特异性   仅适用于多个   声明。根据CSS规则，直接定位的元素将始终   优先于元素从其继承的规则   祖先。

我喜欢https://specifishity.com上的 0-0-0 解释：

非常描述!important指令的图片！但是有时候，这是覆盖内联style属性的唯一方法。因此，这是避免两者的最佳做法。

Answer 8

还要注意的一点是，当HTML元素上有两种样式具有相同的优先级时，浏览器将优先使用最后写入DOM的样式...因此，如果在DOM中：

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... div的宽度将为50px

CSS的优先顺序是什么？

8 个答案: