CSS样式表以什么顺序覆盖？
ian*_*n5v 149 css overriding stylesheet
在HTML标题中,我有这个:
<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>
styles.css是我的页面特定表.master.css是我在每个项目中使用的工作表来覆盖浏览器默认值.哪些样式表优先考虑？示例:第一张包含特定的
body { margin:10px; }
和相关的边界,但第二个包含我的重置
html, body:not(input="button") {
margin: 0px;
padding: 0px;
border: 0px;
}
从本质上讲,CSS的级联元素在样式表引用方面是否与在典型的CSS函数中一样？这意味着最后一行是显示的那一行？
dus*_*uff 154
CSS规则级联的规则很复杂 - 而不是试图严厉地解释它们,我只是简单地引用你的规范:
http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade
简而言之:更具体的规则会覆盖更普遍的规则.根据涉及的ID,类和元素名称的数量以及是否使用!important声明来定义特异性.当存在具有相同"特异性水平"的多个规则时,无论哪个出现最后获胜.
- 实际上,`!important`直接参与级联,与特异性无关.特异性与选择器有关,而`!important`与属性声明一起使用.(所以说你的规则很复杂你是对的!) (11认同)
- 感谢您的“当存在相同“特异性级别”的多个规则时，以最后出现的为准”！这就是我需要的信息。 (4认同)
- @iananananan:基本上,浏览器从不会在单个样式表中看到CSS.如果有多个样式表,则将它们视为一个巨型样式表,并相应地评估规则. (3认同)
- 那么对于样式表加载的顺序没有特定的规则？我了解 CSS 在特异性方面的显示方式，但是我假设我的母版表将加载，除非被覆盖。 (2认同)
- 那么样式表加载方式与元素相同,如果它们具有相同的特异性,那么它们的优先级是否优先？ (2认同)
- @ user34660 BoltClock的评论是从CSS样式的角度出发的.你是正确的,样式表在DOM中保持独立,但这种分离不会影响这些样式如何应用于任何东西. (2认同)
Ble*_*der 29
应用最具体的样式:
div#foo {
color: blue; /* This one is applied to <div id="foo"></div> */
}
div {
color: red;
}
如果所有选择器具有相同的特异性,则使用最近的去除:
div {
color: red;
}
div {
color: blue; /* This one is applied to <div id="foo"></div> */
}
在您的情况下,body:not([input="button"])更具体,因此使用其样式.
- 当我们需要覆盖不可编辑的样式表时，特殊性规则会让事情变得更加困难！ (2认同)
Roy*_*M J 23
订单确实很重要.将采用最后声明的多次出现的值.请看我编写的同一个:http://jsfiddle.net/Wtk67/
<div class="test">Hello World!!</div>
<style>
.test{
color:blue;
}
.test{
color:red;
}
</style>
如果你交换顺序.test{},那么你可以看到HTML取值在CSS中声明的最后一个值
- 所以你应该最后添加最具体的CSS. (3认同)
小智 16
最后加载的CSS是THE MASTER,它将覆盖具有相同css设置的所有css
例:
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/master.css">
</head>
reset.css
h1 {
font-size: 20px;
}
master.css
h1 {
font-size: 30px;
}
h1标签的输出为font-size:30px;
- 你好。就我而言，第一个定义的“.css”是最后加载的。它们是按照加载顺序应用还是按照定义顺序应用？ (2认同)
让我们尝试用一个例子来简化级联规则.规则对一般情况更为具体.
- 首先应用ID的规则(无论顺序如何,都是类和/或元素)
- 无论顺序如何,都可以在元素上应用类
- 如果没有类或id,则应用通用的
- 对于同一组/级别,应用顺序中的最后一个样式(基于文件加载顺序的声明顺序).
这是css和html代码;
<style>
h2{
color:darkblue;
}
#important{
color:darkgreen;
}
.headline {
color:red;
}
article {
color:black;
font-style:italic;
}
aside h2 {
font-style:italic;
color:darkorange;
}
article h2 {
font-style: normal;
color: purple;
}
</style>
这是css风格
<body>
<section>
<div>
<h2>Houston Chronicle News</h2>
<article>
<h2 class="headline" id="important">Latest Developments in your city</h2>
<aside>
<h2>Houston Local Advertisement Section</h2>
</aside>
</article>
</div>
<p>Next section</p>
</section>
这是结果.无论样式文件的顺序还是样式声明,都id="important"应用于最后(注意class="deadline"声明的最后但不起作用).
该<article>元素包含<aside>元素,但最后宣布样式将生效,在这种情况下,article h2 { .. } 第三h2元素上.
以下是IE11的结果:(没有足够的权利发布图片)DarkBlue:休斯敦纪事报新闻,DarkGreen:您所在城市的最新动态,紫色:休斯顿当地广告组,黑色:下一节
它取决于加载顺序和应用于每种样式的实际规则的特殊性.根据您的问题的上下文,您希望首先加载常规重置,然后是特定页面.然后,如果你还没有看到预期的效果,你需要调查所涉及的选择器的特异性,正如其他人已经指出的那样.
| 归档时间： |
|
| 查看次数： |
156140 次 |
| 最近记录： |