为什么我的CSS规则未按预期应用？

Question

我有许多不同的CSS文件。我在通用CSS中定义了一个这样的类：

common.css

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

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

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

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

other.css

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

HTML

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

但是它在我的div中不起作用，因为它考虑了overflow：hidden。 如果我添加overflow-y=auto !important;可以使用，但是我想避免使用它。 你有什么主意吗？

Answer 1

这都是关于特异性的。 .container-example> div比单个类更有价值。在指定的文件或主CSS文件中，您将不得不使用一个价值更大的值来覆盖它。例如，

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

的价值超过

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

检查CSS-Trick Guide以获得更多信息。

Answer 2

那是因为它被

覆盖

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

将其更改为：

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

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