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

Question

当HTML span包含CSS font-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 *选择所有子元素，然后将font-family设置为inherit。这将有效地覆盖子元素字体并强制所有子元素继承最接近父元素字体的值。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

根据您尝试实现的目标，还值得一提的是您可以使用直接子选择器>，以便仅定位直接子项：{{1} }。

＆＃13;

＆＃13;

.parent > *

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

CSS优先级是这样的：

1. 此元素的规则标有！important
2. 根据适用于此元素的规则的ID标记，类等的数量，从高到低的规则评分。
3. 浏览器的默认用户代理样式。
4. 对于默认继承的规则，例如font-family（但不包括background-color之类的其他规则），父级的当前值。

您的子节点获得的内容不是该列表中的 1。，但 4。 !important标志确保父节点具有该值字体集，但这种重要性并不会带给孩子们。你可以设置font-family: inherit !important，如果你真的，真的希望每个元素都采用它的父字体。

建议：只在极端情况下使用!important。您可以通过更温和的方式获得另一个CSS规则的优先级。