CSS 的优先顺序是什么？

我试图弄明白为什么我的一个 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-有人能解释一下为什么会这样吗？

203580 次浏览
小开

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

在您的例子中，.smallbox-paysummary是在 .smallbox之后定义的，因此优先级为10px。

小开
最佳答案

有几个规则(按照这个顺序应用) :

  1. 内联 css (html 样式属性)覆盖样式标记和 css 文件中的 css 规则
  2. 更具体的选择器优先于不太具体的选择器
  3. 如果两者具有相同的特异性，则代码中稍后出现的规则将覆盖先前的规则。
  4. 具有 !important的 css 规则总是优先。

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

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

  • Id (例如: #main选择 <div id="main">)
  • 类(ex. : .myclass)、属性选择器(ex. : [href=^https:])和伪类(ex. : :hover)
  • 元素(例如: div)和伪元素(例如: ::before)

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

示例: 比较 #nav ul li a:hover和 #nav ul li.active a::after

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

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

小开

首先，根据您的 @extend指令，似乎您使用的不是纯 CSS，而是像 SASS os Stylus 这样的预处理器。

现在，当我们谈论 CSS 中的“优先顺序”时，涉及到一个 将军规则: 无论什么规则设置 之后，都应用其他规则(以自顶向下的方式)。在您的例子中，只要在 .smallbox-paysummary之后指定 .smallbox，就可以更改规则的优先级。

然而，如果你想更进一步，我建议这样读: CSS 级联 W3C 规范。你会发现规则的优先次序是基于:

  1. 当前媒体类型;
  2. 重要性;
  3. 产地来源;
  4. 选择器的特殊性，最后是我们熟知的规则:
  5. 哪一个是后面指定的。
小开

正如 W3中的状态: W3级联 CSS

应用不同样式表的顺序如下(引自 W3级联部分) :

  1. 用户代理声明

  2. 用户正常声明

  3. 作者正常声明作者正常声明

  4. 作者重要声明

  5. 用户重要声明

有关这方面的更多信息，请参阅 W3文档

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

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

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

小开

下面是图表中 CSS 样式顺序的汇编，其中 CSS 规则具有更高的优先级，并优先于其他规则: CSS styling order

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

小开

我们在这里看到的是 具体点，如 Mozilla所述:

特异性是浏览器决定哪个 CSS 属性的方法 值与元素的相关性最大，因此 具体性是基于由 不同种类的 CSS 选择器。

具体性是应用于给定 CSS 声明的权重, 由匹配中每个选择器类型的数目确定 当多个声明具有相同的特异性时，最后一个 在 CSS 中找到的声明将应用于元素 只有当同一个元素被多个 根据 CSS 规则，直接目标元素将始终 元素从其 祖先。

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

enter image description here

!important指令的图片非常具有描述性！但有时这是覆盖内联 style属性的唯一方法。所以避免这两种情况是最好的做法。

小开

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

小开

简单地说，我们应该记住以下两点:

  1. 内联 CSS 比嵌入式和外部 CSS 具有更高的优先级。
  2. 所以最后的顺序是: Value 定义为 Important > Inline > id nesting > id > class nesting > class > tag nesting > tag

提交答案