CSS的优先顺序是什么？

小编典典

CSS的优先顺序是什么？

all

我试图弄清楚为什么我的一个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 - 有人可以解释为什么会这样吗？

阅读 76

2022-08-29

共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)都有一个
计算元素选择器的数量：第一个有 3个（），ul li a第二个有 4 个（ul li a ::after），因此第二个组合选择器更具体。

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

2022-08-29