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

Question

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

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

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

Answer 1

您可以使用.dash { font ... }之类的规则设置字体属性，并为元素内部的元素设置字体属性，因为每个元素都会从适用于它的声明中获取字体属性，而不是其父级或其他方兴未艾。

例如，如果你有

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

然后设置

.dash { font-family: Cambria }

然后设置

没有问题

h2 { font-family: Calibri }

没有引用dash类。 h2元素从后一个规则中获取其字体系列，完全独立于适用于其父级的规则。

Answer 2

没有

.dash * { font

做你需要的吗？

在澄清评论和小提琴之后

更新 ......

所以，我有你的问题＆＃34;倒退＆＃34;因为我以为你试图忽略所包含的html中的细节。

但我认为我的建议仍然有效，不是吗？

.dash * { color: red; }
.included-class { color: blue /* this will take precedence */ }

http://jsfiddle.net/zDVED/

Answer 3

根据Harry Roberts的文章http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/#safely-increasing-specificity，我重复应用了同一个类，以便将该选择器的特异性提高到应用于该部分的特征（其本身简单地设置为.portion-class tag）。 / p>

请参阅：

• Harry Roberts：http://jsfiddle.net/csswizardry/3N53n/3/ - 请注意第28行使用.btn.btn。
• 我的：http://jsfiddle.net/Emsap/5/ - 请注意在第2行使用.dash-heading.dash-heading

请注意，当然，我认为DOM中元素的位置影响了特异性是错误的。