如何取消从父级元素继承下来的CSS样式呢？

要取消从父级元素继承下来的 CSS 样式，你可以使用以下几种方法：

1. 使用 all: unset;

这是最简单粗暴的方法，它会将所有继承的属性重置为它们的初始值，包括font、color、line-height等。 相当于同时使用了inherit: initial; 和 all: initial;。

.child {
  all: unset; 
}

2. 使用 all: revert; (推荐)

all: revert; 会将元素的样式重置为浏览器默认样式表中定义的样式。 这通常是 preferred 的方法，因为它能更好地保留用户代理样式表的样式，提供更一致的跨浏览器体验。 如果浏览器默认样式表中没有定义该属性的样式，则效果等同于 unset。

.child {
  all: revert;
}

3. 针对特定属性重置

如果你只想重置特定的继承属性，可以直接设置它们的值为它们的初始值。 你可以使用 initial 关键字：

.child {
  color: initial;       /* 重置颜色 */
  font-size: initial;   /* 重置字体大小 */
  line-height: initial; /* 重置行高 */
}

4. 使用继承的值 inherit (谨慎使用)

inherit 关键字会强制元素继承父元素的属性值。 这在想要恢复继承，或者确保某个属性继承父元素的值时有用。 但是，如果你想取消继承，这并不是你想要的。

/*  这会继承父元素的颜色，而不是取消继承 */
.child {
  color: inherit; 
}

5. 更具体的覆盖

有时，你不需要完全重置继承，只需要更具体地覆盖父元素的样式。 例如，如果父元素设置了 font-size: 16px;，而你想将其设置为 14px，可以直接设置 font-size: 14px; 即可。

.child {
  font-size: 14px;
}

选择哪种方法？

• 对于完全重置所有继承样式，all: revert; 通常是最佳选择，因为它尊重浏览器默认样式。
• 对于重置特定属性，使用 property: initial;。
• 避免使用 all: unset;，除非你明确知道它的行为并希望所有属性都回到初始值，而不是浏览器样式。
• 避免使用 inherit，除非你明确希望继承父元素的值。

示例:

假设父元素设置了 color: blue; 和 font-size: 20px;。

<div class="parent">
  <div class="child">Child Element</div>
</div>

.parent {
  color: blue;
  font-size: 20px;
}

.child {
  all: revert; /* 子元素将拥有浏览器默认的文字颜色和大小 */
}

通过以上方法，你可以有效地控制 CSS 继承，并创建你想要的样式。 选择哪种方法取决于你的具体需求。