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 - 有人可以解释为什么会这样吗？
Lor*_*yer 164
有几个规则(按此顺序应用):
- 内联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)有一个 - 计算元素选择器的数量:
ul li a第一个是3(),第二个是(4ul li a ::after),因此第二个组合选择器更具体.
- "...样式标记中的css规则...覆盖css文件中的规则".我最近几次见过这个神话.我不知道它来自哪里,但这是无稽之谈. (3认同)
- @PakiPat`：hover`不是* class *选择器，而是* pseudo-class **选择器。 (2认同)
小智 17
这是图中CSS样式顺序的汇编，其中CSS规则具有更高的优先级，并且优先于其余规则：
免责声明：我和我的团队以及一篇博客文章（https://vecta.io/blog/definitive-guide-to-css-styling-order）一起完成了这一工作，我认为它将对所有前端派上用场开发人员。
- 该图需要特殊的思维方式。对我来说，理解该图比理解样式继承本身要困难得多。 (5认同)
- “从左到右”和“从上到下”排序是什么意思？实际上，具有相同特性的后来的规则优先于早期的规则。那么，既然底部优先于顶部，那么它不应该是从底部（最高）到顶部（最低）吗？ (3认同)
AMS*_*777 17
我们在这里看到的是所谓的特异性，通过规定的Mozilla：
特异性是浏览器决定哪些 CSS 属性值与元素最相关并因此将被应用的方式。特异性基于由不同种类的 CSS 选择器组成的匹配规则。
特异性是应用于给定 CSS 声明的权重，由匹配选择器中每个选择器类型的数量决定。当多个声明具有相同的特异性时，CSS 中找到的最后一个声明将应用于元素。特定性仅适用于多个声明针对同一元素的情况。根据 CSS 规则，直接定位的元素将始终优先于元素从其祖先继承的规则。
我喜欢https://specifishity.com 上的0-0-0解释：
相当描述!important指令的图片！但有时它是覆盖 inlinestyle属性的唯一方法。所以最好的做法是尽量避免两者。
类在 html 元素中出现的顺序无关紧要，重要的是块在样式表中出现的顺序。
在您的情况下.smallbox-paysummary是.smallbox在 10px 优先级之后定义的。
首先,根据您的@extend指令,您似乎不是使用纯CSS,而是使用SASS os Stylus等预处理器.
现在,当我们在CSS中讨论"优先顺序"时,会涉及一般规则:在应用其他规则(以自上而下的方式)之后设置的规则.在你的情况,只是通过指定.smallbox后,.smallbox-paysummary你就可以改变你的规则优先级.
但是,如果你想更进一步,我建议这个阅读:CSS级联W3C规范.您会发现规则的优先级基于:
- 目前的媒体类型;
- 重要性;
- 起源;
- 选择器的特殊性,最后我们众所周知的规则:
- 后者指定了哪一个.
另外需要注意的是，当 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
- 这并不是真正的优先级，这是层叠样式表的层叠部分。 (2认同)
AS 在 W3 中的状态： W3 Cascade CSS
应用不同样式表的顺序如下（引自 W3 级联部分）：
用户代理声明
用户正常声明
作者正常声明
作者重要声明
- 用户重要声明
参考 W3 文档中有关此的更多信息