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

当 HTML span具有CSS font-family时,我不能强制它使用父字体系列

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

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

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

为什么span不使用parent font-family？

我怎样才能做到这一点？

解决方法

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

.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>

原文地址：https://www.jb51.cc/html/223852.html