为什么我的 CSS 规则没有按预期应用？ [复制]答案

【问题标题】：Why isn't my CSS rule being applied as expected? [duplicate]为什么我的 CSS 规则没有按预期应用？ [复制]
【发布时间】：2019-08-13 22:26:38
【问题描述】：

我有许多不同的 CSS 文件。我在常见的 CSS 中定义了一个类，如下所示：

common.css

.container-example {
  display: grid;
  height: 100%;
  width: 100%;
  background-color: black;
}

.container-example > div {
  overflow: hidden;
}

它适用于我所有的 HTML 文件。

但是，在一个 HTML 文件中，对于一个 div，我需要 overflow-y: auto;。因此我在另一个 CSS 文件中创建了一个特定的类：

other.css

.override-overflow {
  overflow-y: auto;
}

HTML

<div class="container-example">
  <div class="override-overflow">
     ...
  </div>
</div>

但它在我的 div 中不起作用，因为它考虑了溢出：隐藏。如果我添加overflow-y=auto !important; 它会起作用，但我想避免它。你有什么想法吗？

【问题讨论】：

标签： html css

【解决方案1】：

一切都与特异性有关。 .container-example > div 比一个单独的类更有价值。在指定的文件或主 CSS 文件中，您必须用更有价值的值覆盖它。例如，

.container-example > div.override-overflow {
   overflow: auto;
}

价值超过

.container-example > div {
   overflow: hidden;
}

查看CSS-Trick Guide了解更多信息。

【讨论】：

【解决方案2】：

那是因为它被

覆盖了

.container-example > div {
  overflow: hidden;
}

改成：

.container-example > div:not(.override-overflow) {
  overflow: hidden;
}

有关:not() 选择器的更多信息，请参阅this。

【讨论】：