如何使元素的CSS不继承自他人？

Question

我希望元素仅使用“ A”部分中的css并忽略“ B”部分。

如果JavaScript可以做到，怎么办？

谢谢。

Answer 1

您提供的示例无法做到这一点。 CSS中的C代表级联，样式规则沿DOM树向下层叠 。

您必须使用更具体的选择器将元素的样式重置为所需的样式，例如#Examplewrapper input{} 。 通过使用更特定的选择器，它将覆盖/补充以前的样式，而无需!important 。

另外，您可以将最上面的选择器设置为更具体，例如#content input{} 。 这样，当您将表单放置在#footer ，它将没有样式，因为#content中没有#footer （它无法层叠）。

---

我建议您定义一个常规input 。 这样，所有表单在您的网站上都具有相同的字体，大小和样式。 如果需要另一个颜色边框，则只需更改该设置即可。 这是许多（专业）站点的工作方式，因为它是最有效的。

Answer 2

这就是继承的工作方式。 如果仅全局设置了其他样式（即针对所有input元素），则只能覆盖样式。

您始终可以使用某些类名来限制input的全局样式，例如input.myStyle这样原始 input将不会设置任何样式。