使用！important重写CSS *定义的最佳方法

Question

我正在一个产品中定义自己的CSS。他们定义的一部分是定义所有这样的元素：

* {
  font-face: Helvetica;
  font-size: 12px !important;
}

我正在使用他们的CSS创建一些屏幕，但想要做一些更改，如下所示：

.change {
  font-size: 1.25em;
}

现在，当我在div中分配了一个更改类的段落时，它不起作用。

<div class="change">
  <p>Lorem ipsum dolor...</p>
</div>

这个JSfiddle显示了问题：http://jsfiddle.net/uqogzayn/5/

这个JSfiddle显示了一个错误的工作解决方案：http://jsfiddle.net/uqogzayn/3/

问题：使用我想要的字体大小来获取div中所有内容的最佳方法是什么？ 问题：如何将我的change类应用于div中的所有内容，同时仍然遵循CSS最佳实践？

Answer 1

我继续四处寻找。首先，我想看看你是否可以删除以前制定的定义。答案是否定的。另一个选择是像这样定义每个子元素：

.change p {
  font-size: 1.25em !important;
}

虽然这有效但我也知道这是不好的CSS形式。此外，如果我必须为我想要覆盖的每个元素添加一个条目。如果我想创建其他类遇到同样的问题，该怎么办呢。

所以我考虑过使用重置并提出：

* {
  font-size: inherit !important;
}
body {
  font-size: 12px !important;
}

这整个经历让我意识到你永远不应该使用外卡选择器来声明任何东西。您网页中的所有内容都将从正文继承，因此只需在正文中定义您的基础。

Answer 2

当你添加*时，它意味着所有元素都获得了这个CSS属性，<p>是HTML的一个元素，因此它获得了*属性而不是.change类，你必须添加{这个段落中的{1}}类

.change

或者你可以像这样添加新的css类

 <p class="change">

我希望我能帮到你，这就是你想要的。