具有类和 id 的 div，一些高度被覆盖答案

【问题标题】：Div with class and id, some height is overwritten具有类和 id 的 div，一些高度被覆盖
【发布时间】：2025-12-17 19:10:01
【问题描述】：

我正在使用这个 div：

<div id="container" class="large">

在我的 CSS 中，ID 被分配了一个默认高度，如下所示：

#container {height: 500px}

在这种情况下，我希望 div 更大，但这会覆盖类。

.large{height: 560px}

我不知道如何让一个类变小和一个类变大...
我该怎么做？
附加到类，只影响这个 div 使它更大！

【问题讨论】：

【解决方案1】：

只需组合选择器：

#container.large { height : 560px; };

这增加了选择器的特异性，因为有一个id 和一个class，而不会在使用!important 时产生未来的问题。

为了解释 CSS 的特殊性，值得阅读以下文章：

【讨论】：

【解决方案2】：

对意味着比默认更长的容器使用更高的特异性。

#container.large { height: 560px }

将对 ID 为“container”且类名为“large”的元素应用 560 像素的高度。

默认情况下，ID 选择器将比类选择器具有更高的特异性，无论它出现在文档中的什么位置，因为 ID 只能在文档中出现一次（因此非常具体）。在这种情况下，我们将使用类名扩展我们的特定 ID 选择器，而不是仅使用 ID。

【讨论】：

【解决方案3】：

.large{height: 560px !important}

这将覆盖#container设置的样式。

【讨论】：