Question

我一直在搜索网络，试图找到我的问题的答案，但似乎无法找到直接的答案。我在工作中经常使用文章类，但是从来没有真正需要知道它们是否按顺序加载，即页面上的第一个。

示例

  <div id="example" article class="example1 example2 example3">
   Here's the div.
  </div>

此外，我想问一下，如果我在示例1中设置背景并在示例2中设置背景，示例1的背景是否会在示例2下面。我想我在问这是否就像堆叠div一样。

我问的原因是因为我有一个带有ajax加载器背景的文章类。但是我需要直接在ajax加载器的顶部加载图像。我的想法是制作一个没有所有脚本的预算预加载器。

再次感谢！

Answer 1

您要问的是应用CSS规则的优先顺序。简化为：

不重要的是您在元素（class="foo bar baz"）上指定类的顺序。
确实在CSS文件中编写CSS声明的顺序很重要。
```
foo { ... }
bar { ... }
baz { ... }
```
后来的规则会覆盖之前的规则。
您正在将这些CSS规则中指定的属性应用于元素。元素只能有一个这样的属性，它们不会“堆叠”。如果两个CSS规则指定相同的属性，则后面的规则将覆盖该元素上的该属性。

示例：

<div class="baz bar foo">

.foo {
    color: blue;
    border: 1px solid green;
}

.bar {
    color: black;
    border-color: orange;
}

.baz {
    color: red;
    margin: 10em;
}

同样，class="..."属性中的类的顺序无关紧要。所有三个类都应用于元素。首先是.foo，然后是.bar，然后是.baz。该元素将具有以下属性，这些属性是合并上述规则的结果：

color:        red;    # from .baz
border-color: orange; # from .bar
border-style: solid;  # from .foo
border-width: 1px;    # from .foo
margin:       10em;   # from .baz

（请注意，规则优先级实际上比这更复杂，实际上取决于选择器的特殊性，但上述内容适用于同样具体的选择器。）

文章类：加载订单有关系吗？

1 个答案: