1

在我的 CSS 中，我有以下内容：

.myDiv{
    float:left;
    width:100px;
    height:100px;
}

.yellow{
    background:#faf8c7;
}

.lightGrey{
    background:#f8f8f8;
}

在我的 HTML

<div class="myDiv lightGrey yellow"></div>

这应该显示div为黄色，但它是浅灰色。如果我在我的 CSS（不是 HTML）中更改 .yellow 和 .lightGrey 的顺序，那么会div变成黄色……这是为什么呢？

当然，应该是在 HTML 中编写类的顺序来确定div是黄色还是灰色。CSS 的顺序应该是无关紧要的。

4

4 回答 4

8

当然应该是类在html中编写的顺序决定了div是黄色还是灰色

这就是级联的定义方式：

  1. 查找适用于目标媒体类型的相关元素和属性的所有声明。如果关联的选择器与相关元素匹配，并且目标媒体与包含声明的所有@media 规则以及到达样式表的路径上的所有链接上的媒体列表匹配，则声明适用。
  2. 根据重要性（正常或重要）和来源（作者、用户或用户代理）排序。按优先级升序排列：
    1. 用户代理声明
    2. 用户正常声明
    3. 作者正常声明
    4. 编写重要声明
    5. 用户重要声明
  3. 根据选择器的特殊性对具有相同重要性和来源的规则进行排序：更具体的选择器将覆盖更一般的选择器。伪元素和伪类分别算作普通元素和类。
  4. 最后，按指定顺序排序：如果两个声明具有相同的权重、来源和特异性，则后者指定获胜。导入样式表中的声明被认为在样式表本身的任何声明之前。

#4 是您正在苦苦挣扎的部分，声明具有相同的特异性，因此后者获胜。

于 2013-08-28T15:08:45.273 回答
1

级联样式表。

这意味着样式表中稍后出现的样式将覆盖表单中较早出现的样式。

于 2013-08-28T15:09:29.003 回答
0

由于所有规则都具有相同的特异性，因此最后一个（用于Cascade的含义）CSS获胜。换句话说，无论你在标记中重新排列你的类，使用给定的样式，你的背景总是浅灰色的。

当然，应该是类在 HTML 中编写的顺序决定了 div 是黄色还是灰色。CSS 的顺序应该是无关紧要的。

对于上面的解释，它是相反的

于 2013-08-28T15:08:37.987 回答
0

每个类的html代码中的顺序myDiv lightGrey yellow根本不重要，就像你说：我买了3种颜色，但我们不知道你买的是第一个还是最后一个

于 2013-08-28T15:12:49.440 回答