除了class和id，有些高度会被覆盖

Question

我正在使用这个div：

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

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

#container {height: 500px}

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

.large{height: 560px}

我不知道如何制作 class small 和 class large ...
 我该怎么做？
附加到班级，只影响这个div，使其更大！

Answer 1

只需组合选择器：

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

这增加了选择器的特异性，因为id 和是class，而不会使用!important创建未来的问题。

为了解释CSS的特异性，值得阅读这些文章：

• CSS Specificity: Things you Should Know。
• Molly Holzschlag's 'CSS 2.1 Specificty Clarified'。
• CSS Specificty Calculator, from suzyit.com。

Answer 2

对容器使用更高的特异性，该容器应超过默认值。

#container.large { height: 560px }

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

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

Answer 3

.large{height: 560px !important}

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