多个 CSS 类: 根据定义的顺序重叠的属性

当一个元素上定义了多个类时，CSS 中是否有一个规则来确定级联顺序？(class="one two" vs 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>
39627 次浏览
小开

类 定义 最后一名是什么赢在这些情况下。元素的顺序并不重要，这在我所知道的所有浏览器中都是一致的，我将尝试找出相关的规范位。

如果 .one有一个 .two没有的属性，你当然会在这两个 <div>元素上看到这个属性。

小开
最佳答案

它取决于在样式表中最后声明的是哪一个,

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

对

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

重写将按照声明类的顺序发生。所以。两个总是赢

小开

Class 属性的顺序一点也不重要。它取决于几个因素，在您的情况下是您的 css 的编写顺序。

两种样式具有相同的特异性，因此。两种风格凌驾于... 的风格之上。一个是因为它在 style 标签的下方。

小开

我认为很明显，没有这样的规则适用。规则 .one与规则 .two具有相同的特异性，因此根据 CSS 标准，.two块中的属性将覆盖 .one中的属性，因为 .two块出现得更晚。在 class属性中，任何地方都不会引用单词的顺序。

小开

当使用多个类来定义一个元素样式表时，您可以使用 !important来覆盖样式表的“ cascating”。

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

它会让你的潜水器变成绿色。

小开

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

另请注意，内联样式将重写在外部样式表中声明的样式。如果希望打破级联链 af 适用性，可以使用 ! 重要的声明，如下所示

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

这将导致 ! 重要的声明覆盖其他声明，而不管其位置如何。有些人认为这是不好的做法，但如果使用得当，它可能会派上用场。

小开

正如其他答案所指出的，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 属性来最后优先)


提交答案