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 - 有人可以解释为什么会这样吗?

原文由 Stephen 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 449
2 个回答

有几条规则(按此顺序应用):

  1. 内联 css(html 样式属性)覆盖样式标签和 css 文件中的 css 规则
  2. 更具体的选择器优先于不太具体的选择器
  3. 如果代码中后面出现的规则具有相同的特异性,则它们会覆盖前面的规则。
  4. 带有 !important 的 css 规则始终优先。

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

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

  • ID(例如: #main 选择 <div id="main">
  • 类(例如: .myclass ),属性选择器(例如: [href=^https:] )和伪类(例如: :hover -c2-c2-c2-c5-6
  • 元素(例如: 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 选择器特异性的好文章

原文由 Lorenz Meyer 发布,翻译遵循 CC BY-SA 4.0 许可协议

这是一个图表中 CSS 样式顺序的汇编,其中 CSS 规则具有更高的优先级并优先于其余部分: CSS样式顺序

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

原文由 Qin 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏