CSS 中的双重 class 声明

Question

因此，由于两套混乱的程序代码在可怕的 Lovecraftian 恐怖中发生碰撞，我对此无能为力，我不得不处理这样一种情况，我将有两个 在同一对象上单独 CSS class 声明。例如，我的最终结果可能看起来像...

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

我知道像这样有多个声明是不好的，但目前我真的无能为力。但是，我可以控制其中一个 class 的内容，并可能控制它们出现在...

中的顺序

鉴于此，该命令将对 classes showing/not-showing 产生什么影响？一个会覆盖另一个吗？它会出错并且我实际上没有 class 吗？他们会像在同一个声明中一样合并吗？还是用它来摧毁敦威治和我所珍视的一切？

编辑：深入研究，div 似乎将完全拒绝显示，但如果可能的话，我正在尝试找到解决方法。

Answer 1

你为什么不这样使用：

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

这对你有用吗？！或者您正在尝试实现其他目标？！

Answer 2

你为什么不直接使用

<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 3

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

当你需要使用多个class时有效：

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

顺序无关紧要，classes 将与 HTML 同等定位，但取决于 CSS 顺序。例如：

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

firstClass 将覆盖 secondClass 因为它设置在 secondClass

之后

Answer 4

首先，您需要将所有 classes 放在一个 'class' 属性中，由一个 space 分隔，否则浏览器将只接受第一个，也就是:

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

要回答您的第二个问题，样式表中后面出现的那个将覆盖第一个 class 也存在的任何规则，又名：

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

颜色会是蓝色。如果他们以相反的方式订购，颜色将是红色的。如果任何规则包含“!important”，它将优先。

此外，如果 classes 中有不同的规则，它们不会冲突并且都适用，又名：

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

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

为单个对象声明多个 class 实际上很常见并且没有问题；因为 jQuery 通常用于 add/remove classes 基于不同的事件。

Answer 5

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

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

.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>

CSS 中的双重 class 声明

Double class declaration in CSS

css

duplicates

declaration

inline-code