Html CSS的优先顺序是什么？

What is the order of precedence for CSS?

提问by Stephen

I'm trying to figure out why one of my css classes seems to override the other (and not the other way around)

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

Here I have two css classes

这里我有两个 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;
}

and in my view I call

在我看来我打电话

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

The font (The overlapping element) shows up as 10px instead of 20 - could someone explain why this is the case?

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

回答by Lorenz Meyer

There are several rules ( applied in this order ) :

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

1. inline css ( html style attribute ) overrides css rules in style tag and css file
2. a more specific selector takes precedence over a less specific one
3. rules that appear later in the code override earlier rules if both have the same specificity.
4. A css rule with !importantalways takes precedence.

1. 内联 css（html 样式属性）覆盖样式标记和 css 文件中的 css 规则
2. 更具体的选择器优先于不太具体的选择器
3. 如果两个规则具有相同的特性，则出现在代码后面的规则会覆盖较早的规则。
4. !important始终优先的css 规则。

In your case its rule 3 that applies.

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

Specificity for single selectors from highest to lowest:

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

• ids (example: #mainselects <div id="main">)
• classes (ex.: .myclass), attribute selectors (ex.: [href=^https:]) and pseudo-classes (ex.: :hover)
• elements (ex.: div) and pseudo-elements (ex.: ::before)

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

To compare the specificity of two combined selectors, compare the number of occurences of single selectors of each of the specificity groups above.

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

Example: compare #nav ul li a:hoverto #nav ul li.active a::after

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

• count the number of id selectors: there is one for each (#nav)
• count the number of class selectors: there is one for each (:hoverand .active)
• count the number of element selectors: there are 3 (ul li a) for the first and 4 for the second (ul li a ::after), thus the second combined selector is more specific.

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

A good article about css selector specificity.

一篇关于 css 选择器特异性的好文章。

回答by Qin

Here's a compilation of CSS styling order in a diagram, on which CSS rules has higher priority and take precedence over the rest:

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

Disclaimer: My team and I worked this piece out together with a blog post (https://vecta.io/blog/definitive-guide-to-css-styling-order) which I think will come in handy to all front-end developers.

免责声明：我和我的团队通过博客文章 ( https://vecta.io/blog/definitive-guide-to-css-styling-order)共同完成了这篇文章，我认为这对所有前端都会派上用场开发商。

回答by AMS777

What we are looking at here is called specificityas stated by Mozilla:

我们在这里看到的是所谓的特异性，通过规定的Mozilla：

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

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

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

I like the 0-0-0explanation at https://specifishity.com:

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

Quite descriptive the picture of the !importantdirective! But sometimes it's the only way to override the inline styleattribute. So it's a best practice trying to avoid both.

相当描述!important指令的图片！但有时它是覆盖 inlinestyle属性的唯一方法。所以最好的做法是尽量避免两者。

回答by Renato

First of all, based on your @extenddirective, it seems you're not using pure CSS, but a preprocessor such as SASS os Stylus.

首先，根据您的@extend指令，您似乎没有使用纯 CSS，而是使用预处理器，例如 SASS os Stylus。

Now, when we talk about "order of precedence" in CSS, there is a generalrule involved: whatever rules set afterother rules (in a top-down fashion) are applied. In your case, just by specifying .smallboxafter .smallbox-paysummaryyou would be able to change the precedence of your rules.

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

However, if you wanna go a bit further, I suggest this reading: CSS cascade W3C specification. You will find that the precedence of a rule is based on:

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

1. The current media type;
2. Importance;
3. Origin;
4. Specificity of the selector, and finally our well-known rule:
5. Which one is latter specified.

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

回答by freedeveloper

AS is state in W3: W3 Cascade CSS

AS 在 W3 中的状态： W3 Cascade CSS

the orden that different style sheet are applied is the following (quote from W3 cascading section):

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

1. user agent declarations

2. user normal declarations

3. author normal declarations

4. author important declarations

5. user important declarations

1. 用户代理声明

2. 用户正常声明

3. 作者正常声明

4. 作者重要声明

5. 用户重要声明

More information about this in the referred W3 document

参考 W3 文档中有关此的更多信息

回答by Lucky Chaturvedi

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)

Inline css ( html style attribute ) overrides css rules in style tag and css file

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

A more specific selector takes precedence over a less specific one.

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

Rules that appear later in the code override earlier rules if both have the same specificity.

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

回答by LifeQuery

The order in which the classes appear in the html element does not matter, what counts is the order in which the blocks appear in the style sheet.

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

In your case .smallbox-paysummaryis defined after .smallboxhence the 10px precedence.

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

回答by P. Avery

Also important to note is that when you have two styles on an HTML element with equal precedence, the browser will give precedence to the styles that were written to the DOM last ... so if in the DOM:

还需要注意的是，当你在一个 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>

...the width of the div will be 50px

...div 的宽度将为 50px