多个 CSS 类：基于定义的顺序重叠的属性 [重复]
Posted
技术标签:
【中文标题】多个 CSS 类：基于定义的顺序重叠的属性 [重复]【英文标题】：Multiple CSS Classes: Properties Overlapping based on the order defined [duplicate] 【发布时间】：2011-03-05 05:27:03 【问题描述】：当在一个元素上定义多个类时，CSS 中是否有确定级联顺序的规则？ （class="one two" 与 class="two one"）
目前看来没有这样的效果。
示例：两个 div 在 Firefox 上都是橙色的
<!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>
【问题讨论】：
参见similar question here，其中重点是指定如何解释多个名称的 W3C 标准。 需要注意的是，如果你有一个类应用于特定元素，一般类不会覆盖它，即如果你的样式看起来像 div.one .two，two 不会覆盖 div 。一。 （在 Safari 中测试） 【参考方案1】：类定义 CSS中的最后一个是在这些情况下获胜的原因。元素的顺序无关紧要，这在我所知道的所有浏览器中都是一致的，我会尝试找到相关的规范位。
整个类没有获胜，属性单独获胜，如果.one有一个.two没有的属性，你当然会在这两个@上看到该属性987654323@ 元素。
【讨论】：
请注意：在 IE6 中使用多类规则实际上存在差异（阅读：错误）。但不适用于这种简单的情况。 :) @deceze - 仅在 IE6 中，此时我倾向于忽略...但是是的，它仅适用于 rules，不适用于 uses ，例如.two.one 与 CSS 中的 .one.two。
所以当使用像引导程序这样已经制作好的样式表时，这会变得真的很好......【参考方案2】：
这取决于您的样式表中最后声明的是哪一个。例如，
.one border: 6px dashed green
.two border: 6px dashed orange
对
.two border: 6px dashed green
.one border: 6px dashed orange
【讨论】：
注意 head 元素中的样式表链接顺序对于定义哪个将首先声明也很重要。我刚刚意识到这一点，并将 jquery UI css 链接放到了 before head 结束标记，以避免当类具有相同的权重/特异性（0,1,0,0）时我的 css 覆盖 jquery UI css，我们仍然可以覆盖然后通过使用更具体的选择器，例如使用 ID 或选择多个类，例如.parent .one。【参考方案3】：
覆盖将按照类的声明顺序发生。所以 .two 总是赢
【讨论】：
【参考方案4】：类属性的顺序一点都没有关系。这取决于几件事，在您的情况下，这是您编写 css 的顺序。
两种样式具有相同的特异性，因此 .two 样式会覆盖 .one 的样式，因为它在样式标签中较低。
【讨论】：
【参考方案5】：我认为很明显没有这样的规则适用。规则.one 与规则.two 具有相同的特异性，因此根据CSS 标准，.two 块中的属性将覆盖.one 中的属性，因为.two 块稍后出现。 class 属性中的单词顺序没有任何参考。
【讨论】：
【参考方案6】：当使用多个类来定义元素样式表时，您可以使用!important 覆盖样式表的“级联”。
.one border: 6px dashed green !important
.two border: 6px dashed orange
它会让你的 div 变成绿色。
【讨论】：
尽量避免使用!important【参考方案7】：
如有疑问，请在 FireBug 中查看该页面。它将删除被覆盖的类并显示它们在页面中的应用顺序。
还请注意，内联样式将覆盖那些在外部样式表中声明的样式。如果你想打破级联链的适用性，你可以使用 !important 声明，如
p margin: 10px 5px 0 10px !important
这将导致 !important 声明覆盖其他声明，无论位置如何。有些人认为这是不好的做法，但如果使用得当，它会派上用场。
【讨论】：
【参考方案8】：正如其他答案所指出的，在 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 属性。）
【讨论】：
以上是关于多个 CSS 类：基于定义的顺序重叠的属性 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
基于请求的不同属性和基于java中的请求的不同顺序排序（不是重复的）
“aspNetDisabled”类在哪里定义，为啥 ASP.NET 会为它呈现干扰性的重复 CSS“类”属性？