在前端开发中，我们可能会遇到某些元素继承了不必要的 CSS 样式，导致页面显示不符合预期。本文将介绍如何解除或者重置元素继承的 CSS 样式，以便更好地掌控页面样式。
解除继承的样式
默认情况下，HTML 元素会从其父元素中继承一些 CSS 样式。但是有时候，我们希望某个元素不受其父元素的影响，需要移除这些继承的样式。
方法一：使用 all 属性
CSS 中的 all 属性可以移除元素所有的样式，包括继承的样式。例如，如果我们想要移除一个 <p> 元素继承的所有样式，可以这样写：
- - ---- ------ -
方法二：使用 inherit 属性
CSS 中的 inherit 属性可以强制让元素继承父元素中的样式，并覆盖之前应用的样式。例如，如果我们想要让一个 <div> 元素继承其父元素的宽度和颜色，可以这样写：
--- - ------ -------- ------ -------- -
重置继承的样式
有时候，我们不仅需要移除元素继承的样式，还需要将其重置为某些特定的值。下面介绍两种方法可以实现这个目标。
方法一：使用 initial 属性
CSS 中的 initial 属性可以将元素的样式重置为浏览器的默认值。例如，如果我们想要将一个 <input> 元素的背景颜色重置为默认值，可以这样写：
----- - ----------------- -------- -
方法二：使用 revert 属性
CSS 中的 revert 属性可以将元素的样式重置为其父元素中应用的样式。例如，如果我们想要将一个 <h1> 元素重置为其父元素中应用的字体样式，可以这样写：
-- - ----- ------- -
总结
本文介绍了如何解除或者重置元素继承的 CSS 样式。通过使用 all、inherit、initial 和 revert 属性，我们可以更好地控制页面样式，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30734