为什么我的班级不覆盖通用星号选择器？

Question

我正在尝试编写一个新类，以将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：我认为这是嵌套类的问题，我可以看到它在这个最小的示例中不起作用

https://jsfiddle.net/81Lzmwcn/2/

Answer 1

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

在我在外部添加<div class="generic-form">后添加了边距：

https://jsfiddle.net/k6ewas4j/1/