如何强制 span 在 CSS 中使用父字体系列

Question

当HTMLspan有CSSfont-family时，我不能强迫它使用父font-family

.Parent {
  font-family: tahoma !important;
}

.Child {
  font-family: cursive, geneva;
}

<div class="Parent">
  <span class="Child">Text</span>
</div>

为什么 span 不使用父级 font-family？

我怎样才能完成这项工作？

Answer 1

您可以使用 .parent * select 所有子元素，然后将 font-family 设置为 inherit。这将有效地覆盖子元素字体并强制所有子元素继承最接近的父元素字体的值。

.parent {
  font-family: tahoma;
}
.child {
  font-family: cursive, geneva;
}
.parent * {
  font-family: inherit;
}

<div class="parent">
  <span class="child">Text</span>
</div>

如果您只想定位 .child 元素，您显然会将 selector 更改为 .parent .child。

根据您要实现的目标，还值得一提的是，您可以使用直接子项 select 或 >，以便只针对直接子项：.parent > *.

.parent {
  font-family: tahoma;
}
.descendant {
  font-family: cursive, geneva;
}
.parent > * {
  font-family: inherit;
}

<div class="parent">
  <span class="descendant">Direct child. <em class="descendant">Not a direct child</em></span>
</div>

Answer 2

CSS 优先级是这样的：

此元素的规则标有 !important
根据 ID 标签的数量从高到低的规则评分，类，等等，适用于此元素的规则。
浏览器的默认用户代理样式。
对于默认继承的规则，如 font-family（但不是其他如 background-color），parent(s) 的当前值。

您的 child 节点得到的不是该列表中的编号 1.，而是 4. !important 标志确保 parent 设置了该字体，但这种重要性不会转移到 children。如果您真的非常希望每个元素都采用其 parent 字体，则可以设置 font-family: inherit !important。

忠告：仅在极端情况下使用 !important。您通常可以以更温和的方式 one-up 另一个 CSS 规则的优先级。

如何强制 span 在 CSS 中使用父字体系列

How to force span to use parent font-family in CSS

html

css

font-family