CSS的优先顺序是什么？

109

我试图弄清楚为什么我的一个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而不是20px-有人可以解释为什么会出现这种情况吗？

html css

— 史提芬
source

2

您正在使用CSS预处理器吗？我看到您有@extend .smallbox;，它看起来像非标准的cSS。

— Jared Farrish 2014年

您确实不应该结合使用@extend-如果它做了我认为可以做到的-并且在同一个元素上同时使用了两个选择器。

— millimoose

SMACSS似乎建议仅将更改后的属性包含在“子类”（即.smallbox-paysummary）中，并可选地使用.smallbox.smallbox-paysummary { font-size: 10px; }

— millimoose '16

1

而且，如果您不希望.smallbox-paysummary字体较小，为什么首先要使其较小？

— millimoose

现在，我想知道为什么两个规则都具有相同的特异性，而不管CSS规则的顺序如何，稍后在元素的class属性上声明的规则都不具有优先权。

— 安迪

186

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

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

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

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

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

要比较两个组合选择器的特异性，请比较上述每个特异性组中单个选择器的出现次数。

例如：比较#nav ul li a:hover来#nav ul li.active a::after

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

关于CSS选择器特异性的好文章。

— 洛伦兹·迈耶
source

特异性如何覆盖内联样式声明？

— Jared Farrish 2014年

3

“ ...样式标记中的css规则...覆盖css文件中的规则”。我最近几次见过这个神话。我不知道它从哪里来，但这是胡扯。

— Alohci 2014年

@jared我交换了第一点。这是你的意思吗？

— 劳伦斯·梅耶

是的，那是我的意思。

— Jared Farrish 2014年

2

@PakiPat :hover不是类选择器，而是伪类选择器。

— 洛伦兹·迈尔

30

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

免责声明：我和我的团队与一篇博客文章（https://vecta.io/blog/definitive-guide-to-css-styling-order）一起完成了这一工作，我认为它将对所有前端派上用场开发人员。

— 秦
source

3

该图需要特殊的心态。对我而言，比样式继承本身更难理解图表。

— 洛伦兹·迈耶

10

正如Mozilla所说，我们在这里看到的称为特异性：

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

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

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

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

— AMS777
source

1

优秀的。正是我想要的。此图形非常棒。

— saran3h

7

首先，根据您的@extend指令，您似乎不是在使用纯CSS，而是在使用诸如SASS os Stylus之类的预处理器。

现在，当我们谈论CSS中的“优先顺序”时，涉及一个通用规则：应用在其他规则之后（以自上而下的方式）设置的任何规则。就您而言，只需.smallbox在.smallbox-paysummary您便可以更改规则的优先级。

但是，如果您想进一步介绍，我建议阅读：CSS级联W3C规范。您会发现规则的优先级基于：

当前媒体类型；
重要性;
起源;
选择器的特殊性，最后是我们众所周知的规则：
后一个指定。

— 雷纳托
source

5

AS在W3中处于状态： W3级联CSS

以下是应用了不同样式表的顺序（来自W3级联部分的引用）：

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

有关此问题的更多信息，请参见W3文档。

— 自由开发者
source

4

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

您的情况.smallbox-paysummary是.smallbox在10px优先级之后定义的。

— 生命查询
source

4

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规则

较具体的选择器优先于较不具体的选择器。

如果两个规则具有相同的特异性，则它们会覆盖在代码的后面。

— 幸运的查图尔韦迪
source

这是一个很好的解释：vanseodesign.com/css/css-specificity-inheritance-cascaade

— akostadinov

1

@Mahi这段时间我一直在挥动您建议的编辑，但是将来，请不要仅为了使编辑足够长而在其上添加垃圾。进行第二次编辑以“撤消”第一项的损害是非常糟糕的做法，对审阅者来说是非常不直观的，并且会产生不必要的工作。相反，只要寻找其他可以改进的地方（例如拼写或语法）。

— 西古萨'17

0

还要注意的重要一点是，当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

— 埃弗里
source

这并不是真正的优先级，这是层叠样式表的层叠部分。

— TylerH