多个CSS类：属性基于定义的顺序重叠
在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>
这取决于你的样式表中最后声明了哪一个。 例如，
.one { border: 6px dashed green } .two { border: 6px dashed orange }
VS
.two { border: 6px dashed green } .one { border: 6px dashed orange }
最后在CSS中 定义的类是在这些情况下胜出的。 元素上的顺序无关紧要，这在所有我知道的浏览器中都是一致的，我将尝试并指定相关的规范位。
如果.one拥有一个属性，那么整个class级都不会赢，属性会单独获得胜利。当然，您不会在这两个<div>元素上看到这个属性。
当使用多个类来定义元素样式表时，您可以使用!important来覆盖样式表的“cascating”。
.one { border: 6px dashed green !important } .two { border: 6px dashed orange }
这将使你的div绿色。
正如其他答案所指出的那样，在class属性中声明的顺序没有任何影响 – 优先级来自CSS文件中声明的顺序。
然而，如果你真的想模拟一些让你在类属性中“伪造”优先级的东西，你可以试试：
.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特性类似）。
我认为很明显，没有这样的规则适用。 .one的规则与规则.two ，因此根据CSS标准， .two块中的属性会覆盖.one的属性，因为.two块稍后出现。 没有任何地方可以参考class属性中单词的顺序。
重写将按类声明的顺序发生。 所以总是赢
如有疑问，请在FireBug中查看该页面。 它将删除被覆盖的类并显示它们在页面中应用的顺序。
另请注意，内联样式将覆盖在外部样式表中声明的样式。 如果要打破级联链的适用性，可以使用！重要声明
p {margin: 10px 5px 0 10px !important}
这将导致重要的脱钩，无论位置如何都可以超越他人。 有些人认为这是不好的做法，但如果明智地使用它可以派上用场。
class属性的顺序并不重要。 这取决于几件事情，在你的情况下，这是你的CSS写入的顺序。
两种样式都具有相同的特性，所以.two样式将覆盖.one样式，因为它在样式标签中较低。
