CSS的优先顺序是什么？

小编典典

CSS的优先顺序是什么？

html

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

阅读 497

2020-05-10

共1个答案

小编典典

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

内联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个（），因此第二个组合选择器更加具体。

2020-05-10