如何在CSS中强制span使用父级字体?family

Question

当HTML中的标签使用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？

我该如何让它起作用？

- Mohammad

---

从父级中删除 !important。 - Booster

Answer 1

您可以使用.parent *选择所有子元素，然后将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元素，那么你显然需要将选择器更改为.parent .child。

根据你想实现的效果，值得一提的是，你还可以使用直接子元素选择器>，以便只选择直接子元素：.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>

- Josh Crozier

---

你确定吗？我的意思是如果我们在CSS中使用相同的选择器重新定义属性，它不会被最新值覆盖。但是如果我们使用另一个选择器（如“parent *”）重新定义属性，那么在具有直接类选择器“.child”时，它是否会生效呢？ - Sina R.

这个示例适用于未安装Tahoma的系统，并显示父类内和外部的子类之间的区别： https://jsfiddle.net/vmzzx1a4/4/ - zpon

请注意，此修复方法不适用于使用样式属性直接设置字体的元素，至少在我的浏览器（Chrome 54.0.2840.59）中是如此。 !important 可以允许覆盖内联样式：https://dev59.com/XmQn5IYBdhLWcg3wcm97 - zpon

Answer 2

CSS的优先级如下：

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

你的子节点所得到的不是列表中的第1项，而是第4项。!important标记确保父级设置了该字体，但这种重要性不会传递给子级。如果你真的想让每个元素都采用其父元素的字体，可以设置font-family: inherit !important。

提醒一句：只在极端情况下使用!important。通常可以以更温和的方式提高CSS规则的优先级。

- Katana314