加载订单很重要！

Question

在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函数中一样？这意味着最后一行是显示的那一行吗？

Answer 1

CSS规则级联的规则很复杂 - 而不是试图严厉地解释它们，我只是简单地引用您的规范：

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

简而言之：更具体的规则会覆盖更一般的规则。根据涉及的ID，类和元素名称的数量以及是否使用!important声明来定义特异性。当存在具有相同“特异性水平”的多个规则时，无论哪个出现最后获胜。

Answer 2

应用最具体的风格：

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"])更具体，因此使用其样式。

Answer 3

订单确实很重要。将采用最后声明的多次出现的值。请参阅我制定的同一个：http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

如果你改变.test{}的顺序，那么你可以看到HTML取值在CSS中声明的最后一个

Answer 4

最后加载的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;

Answer 5

让我们尝试用一个例子来简化级联规则。这些规则对一般情况更为具体。

首先应用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：您所在城市的最新动态，紫色：休斯顿当地广告部分，黑色：下一部分

Answer 6

这取决于加载顺序和应用于每种样式的实际规则的特殊性。根据您的问题的上下文，您希望首先加载常规重置，然后是特定页面。然后，如果你仍然没有看到预期的效果，你需要调查所涉及的选择者的特殊性，正如其他人已经指出的那样。

Answer 7

是的，它的工作原理与它们在一张纸上相同，但是：

加载订单很重要！

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

在上面的代码中，无法保证在master.css之后加载styles.css。因此，如果master.css被快速加载，styles.css需要一段时间，styles.css将成为第二个样式表，并且master.css中具有相同特异性的任何规则都将被覆盖。

最好在部署之前将所有规则放入一张（并缩小）。

Answer 8

最好的方法是尽可能多地使用课程。无论如何，请避免使用ID选择器（＃）。当您使用单个类编写选择器时，CSS继承更容易遵循。

更新：在本文中了解有关CSS特异性的更多信息：https://css-tricks.com/specifics-on-css-specificity/

Answer 9

我怀疑你的问题是你有重复的选择，主设备，适用于所有页面，以及你希望覆盖每个页面的主值的更具体的设置。如果是这种情况，那么您的订单是正确的。首先加载主文件，后续文件中的规则优先（如果它们相同或具有相同的权重）。这个网站上有一个强烈推荐的所有规则描述http://vanseodesign.com/css/css-specificity-inheritance-cascaade/当我开始进行前端开发时，这个页面清理了很多问题。

Answer 10

级联定义了声明的优先级。我可以推荐官方规格；这部分的内容很好理解。

https://www.w3.org/TR/css-cascade-3/#cascading

以下内容按优先级从高到低的顺序排序。

来源和重要性的组合：
1. Transition声明
2. 标有!important的用户代理声明
3. 标有!important的用户声明
4. 页面作者的声明中标有!important
  1. 具有style属性的元素上的定义
  2. 文档范围的定义
5. Animation声明
6. 页面作者的声明
  1. 具有style属性的元素上的定义
  2. 文档范围的定义
7. 用户的声明
8. 用户代理的声明
如果两个声明的来源和重要性相同，则specifity,（即元素定义的明确程度）开始起作用，计算得分。
- 每个标识符（#x34y）得100点
- 每个课程（.level）得10分
- 每种元素类型（li）1点
- 每个伪元素（:hover除外，:not都得1分
例如，选择器main li + .red.red:not(:active) p > *的专一性为24。
出现顺序仅在两个定义具有相同的起源，重要性和特异性的情况下才起作用。以后的定义在文档中的前面的定义之前（包括导入）。

Answer 11

我相信执行代码时，它是从上到下阅读的，这意味着最后的CSS链接将覆盖其上方任何样式表中的相似样式。

例如，如果您创建了两个样式表

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

在这两种方法中，您都将主体背景色设置为两种不同的颜色-style2.css中的主体颜色优先。

您可以通过在想要优先处理的类样式内使用!IMPORTANT或重新安排<link>顺序来避免样式优先权问题。

CSS样式表会以哪种顺序覆盖？

11 个答案:

加载订单很重要！