Question

CSS中是否有规则确定在元素上定义多个类时的级联顺序？（class="one two" vs class="two one"）

现在，似乎没有这样的效果。

示例：Firefox上的两个div都是橙色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <style>
      .one { border: 6px dashed green }
      .two { border: 6px dashed orange }
    </style>
  </head>

  <body>

  <div class="one two">
    hello world
  </div>

  <div class="two one">
    hello world
  </div>

Answer 1

这取决于样式表中最后声明的那个。例如，

.one { border: 6px dashed green }
.two { border: 6px dashed orange }

VS

.two { border: 6px dashed green }
.one { border: 6px dashed orange }

Answer 2

CSS 中最后一个 类是在这些情况下获胜的。元素上的顺序无关紧要，这在我所知道的所有浏览器中都是一致的，我会尝试和相关的spec位。

整个类没有获胜，属性单独获胜，如果.one具有.two没有的属性，您当然会看到该属性这两个<div>元素。

Answer 3

正如其他答案所述，class属性中声明的顺序无效 - 优先级来自CSS文件中的声明顺序。

但是，如果你真的想要模拟允许你在class属性中“伪造”优先级的东西，你可以尝试：

   .one-first { border: 6px dashed green }
      .two-first { border: 6px dashed orange }

   .one { border: 6px dashed green }
      .two { border: 6px dashed orange }

然后

   <div class="one-first two"/>

和

   <div class="two-first one"/>

将以最后一次获胜来命令优先级（与最后获得优先权的CSS属性类似。）

Answer 4

使用多个类定义元素样式表时，可以使用!important覆盖样式表的“级联”。

.one { border: 6px dashed green !important } 
.two { border: 6px dashed orange }

它会让你的div变绿。

Answer 5

class属性的顺序与一位无关。这取决于几个方面，在你的情况下，它是你的CSS编写的顺序。

两种样式都具有相同的特异性，因此.two样式会覆盖.one的样式，因为它在样式标记中较低。

Answer 6

我认为很明显没有这样的规则适用。规则.one具有与规则.two相同的特异性，因此根据CSS标准，.two块中的属性会覆盖.one中的属性，因为{{1}稍后会出现块。不会在.two属性中的单词顺序的任何位置引用。

Answer 7

覆盖将按声明类的顺序发生。所以.two总是胜利

Answer 8

如有疑问，请在FireBug中查看该页面。它将删除被覆盖的类，并显示它们在页面中应用的顺序。

另请注意，内联样式将覆盖外部样式表中声明的样式。如果您想打破适用性的级联链，可以使用！important 声明，如

p {margin: 10px 5px 0 10px !important}

这将导致！important declration覆盖其他位置，无论位置如何。有些人认为这是不好的做法，但如果明智地使用它可以派上用场。

多个CSS类：属性重叠基于定义的顺序

8 个答案: