Question

所以，由于两组凌乱的程序代码在可怕的Lovecraftian恐怖事件中相撞而我无法做多少，我被迫处理一个我将要有两个单独对同一对象的CSS类声明。例如，我的最终结果可能看起来像......

<div class="my_class" class="cuthullus_child_class_that_overwrites_EVERYTHING"> ...something goes here, or so I have been told... </div>

我知道有多个这样的声明很糟糕，但目前我没有什么可以做的。但是，我可以控制其中一个类的内容，并可能控制它们出现的顺序......

鉴于此，订单对显示/不显示的类有什么影响？一个会覆盖另一个吗？它会出错并且我实际上没有上课吗？他们会结合好像两者都在同一个声明中吗？或者只是简单地摧毁邓维奇和我所珍视的一切？

编辑：深入研究，看起来div会完全拒绝显示，但如果可能的话，我试图找到一些方法。

Answer 1

在HTML中使用一个元素的重复属性类无效。

当您需要使用多个类时，这是有效的：

<div class="firstClass secondClass"></div>

顺序无关紧要，类将从HTML中同等地定位，但取决于CSS顺序。例如：

.secondClass{background: salmon}
.firstClass{background: skyblue}

firstClass将覆盖secondClass，因为它在secondClass之后设置

Answer 2

同一元素上的两个类属性将会中断。第二节课将被忽略，见下文。

唯一的选择是添加内联样式，除非您可以在第一个实例中清理代码。

.my_class {
  color: blue;
}
.alt_class {
  color: red;
}

<div class="my_class" class="alt_class">
  ...something goes here, or so I have been told...
</div>

Answer 3

为什么不这样使用：

<div class="my_class second_class third_class">
...something goes here, or so I have been told...
</div>

这不适合你吗？！或者你正在努力实现其他目标？！

Answer 4

为什么不使用

<style>
.parent_class{
 margin:10px;
}

.parent_class.child_class{
margin:20px;
background:red;
}
</style>

<div class="parent_class child_class">
...something goes here, or so I have been told...
</div>

Answer 5

首先，你需要将所有类放在一个'class'属性中，用一个空格分隔，否则浏览器只会占用第一个，也就是：

<div class="my_class cuthullus_child_class_that_overwrites_EVERYTHING">
...something goes here, or so I have been told...
</div>

要回答你的第二个问题，无论哪一个问题出现在样式表的后面，都会覆盖第一个类中也存在的任何规则，即：

.my_class{
color: red;
}
.cuthullus_child_class_that_overwrites_EVERYTHING{
color: blue;
}

颜色为蓝色。如果他们是相反的订购，颜色将是红色。如果任何规则包含'！important'，那么它将优先。

此外，如果课程中有不同的规则，它们不会发生冲突，并且都适用，也就是说：

.my_class{
color: red;
}
.cuthullus_child_class_that_overwrites_EVERYTHING{
font-size: 36px;
}

颜色为红色，字体大小为36px。

为单个对象声明多个类实际上是常见且没有问题;因为jQuery经常用于根据不同的事件添加/删除类。

CSS中的双类声明

5 个答案: