我想弄清楚为什么我的一个 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 - 有人可以解释为什么会这样吗?
原文由 Stephen 发布,翻译遵循 CC BY-SA 4.0 许可协议
有几条规则(按此顺序应用):
!important
的 css 规则始终优先。在您的情况下,规则 3 适用。
单个选择器的特异性从最高到最低:
#main
选择<div id="main">
).myclass
),属性选择器(例如:[href=^https:]
)和伪类(例如::hover
-c2-c2-c2-c5-6div
)和伪元素(例如:::before
)要比较两个组合选择器的特异性,请比较上述每个特异性组的单个选择器的出现次数。
示例:将
#nav ul li a:hover
与#nav ul li.active a::after
进行比较#nav
):hover
和.active
)ul li a
),第二个有 4 个(ul li a ::after
),因此第二个组合选择器更具体。一篇关于 css 选择器特异性的好文章。