html - 为部分页面中的特定标签设置默认字体样式

Question

将 CSS 属性设置为特定性较低的页面部分中给定标记的默认值的最佳、最可维护和可读的方法是什么。目前，我有一个页面从单独的全局样式表中的 html 选择器获取全局默认字体样式。我的页面的很大一部分(具有 dash 类)我想使用不同的默认字体样式。

仅设置 .dash h1 { font.... } 的主要问题是它具有非常高的特异性。每次我想为 .dash 的后代元素设置字体样式时，我都需要引用 .dash。由于我正在围绕模块化设计工作，其中每个组件都是独立开发的，所以这是一个非常糟糕的主意。出于显而易见的原因，更糟糕的解决方案是设置 !important 或使用 ID。显然，我们在为 html h1 或任何其他标签设置字体时不会遇到这个问题，因为所有标签的特异性都低于类。

是否有一种简单的低特异性方法来为标签设置 CSS 属性，这些标签是 DOM 中较高元素的后代，由类选择，以便可以通过将字体属性应用于另一个选择的元素来覆盖它类(class)？

Answer 1

您可以使用 .dash { font ... } 之类的规则设置字体属性，并为样式化的元素内的元素设置字体属性，因为每个元素都从声明中获取字体属性适用于它，而不是它的 parent 或其他上升。

例如，如果你有

<div class=dash>
some content
<h2>some heading</h2>
some content
</div>

你设置

.dash { font-family: Cambria }

那么设置就没有问题了

h2 { font-family: Calibri }

不引用 dash 类。 h2 元素从后面的规则中获取其字体系列，完全独立于应用于其父级的规则。