为什么我的班级没有覆盖通用星号选择器？答案

【问题标题】：Why doesn't my class override the universal asterisk selector?为什么我的班级没有覆盖通用星号选择器？
【发布时间】：2019-07-31 18:09:32
【问题描述】：

我正在尝试编写一个新类以将 10px 边距应用于 div，如下所示：

.generic-form-filters {
  margin: 10px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<div id="SearchFormWrapper" class="generic-form-filters m-height-650-above-tablet">
  Some code
</div>

但是我的generic-form-filters 课程不起作用。我可以在 Chrome 控制台中看到这一点：

但我找不到 generic-form-filters 应用类。如何覆盖*？我检查了缩小的 CSS 文件是否包含 .generic-form-filters{margin:10px}。

编辑 0：类名 generic-form-filter 中有拼写错误，我已将其更正为 generic-form-filters。

编辑 1：我认为这是嵌套类的问题，我可以看到它在这个最小的示例中不起作用

【问题讨论】：

我将您的代码转换为现场演示......确实如此。因此，无论问题是什么，问题的原因都没有在您的问题中表达。您需要提供minimal reproducible example。
jsfiddle.net/0tprnubx 它可以工作（应该是，因为* 具有最低的特异性）。也许您在.generic-form-filter 之前的规则之一有错误（例如，某处缺少}）？
它应该可以工作 - 正如我在您的问题中看到的那样，您在某些地方错过了“s”，因此请确保正确定义 css 和类名。
@SumitPatel 道歉，这是一个错字，我已经编辑了问题。
“编辑：类名 generic-form-filter 中有拼写错误，我已将它们更正为 generic-form-filters”——这解决了问题吗？

【解决方案1】：

所以经过一番研究，我发现问题在于嵌套类，而不是通用选择器。事实上，generic-form-filters 类从未应用过。这是描述导致问题的原始代码的最小示例： https://jsfiddle.net/81Lzmwcn/2/

边距是我在外面加<div class="generic-form">后加的：

【讨论】：