要取消从父级元素继承下来的 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 继承，并创建你想要的样式。 选择哪种方法取决于你的具体需求。
