如何仅在父元素<div>的font-size为inherit时，设置<p>字体大小为14px？

要实现仅当父<div>的font-size为inherit（未显式设置）时，让子<p>的字体大小为14px，由于CSS原生没有直接判断父元素属性计算值的选择器，我们可以根据不同场景采用以下几种方案：

方案1：匹配内联样式设置的父元素font-size #

如果父<div>的font-size是通过内联style属性显式设置的，可以用属性选择器精准匹配，然后重置子元素的字体大小：

/* 默认给div下的p设置14px */
div p {
  font-size: 14px;
}

/* 当div有内联font-size设置时，让p继承父元素的字体大小 */
div[style*="font-size"] p {
  font-size: inherit;
}

注意：此方案仅对通过内联style设置的font-size生效，无法匹配外部/内部样式表中设置的font-size。

方案2：使用CSS变量实现通用控制 #

通过CSS变量实现更灵活的控制，无论父元素的font-size是通过哪种方式设置的，都能生效：

/* 给div定义默认变量值为inherit */
div {
  --parent-font-size: inherit;
  font-size: var(--parent-font-size);
}

/* 子p默认使用14px，当父元素变量存在有效值时，继承该值 */
div p {
  font-size: var(--parent-font-size, 14px);
}

当你需要给<div>显式设置font-size时，只需同时更新变量值即可：

/* 示例：给div设置16px字体大小 */
div.specific-size {
  font-size: 16px;
  --parent-font-size: 16px;
}

此时该div下的p会自动继承16px的字体大小，未设置变量的div下的p则保持14px。

方案3：手动标记+CSS层叠（适合可控项目） #

如果项目中可以手动给显式设置font-size的<div>添加标记类，这是最直接可靠的方案：

/* 默认给所有div下的p设置14px */
div p {
  font-size: 14px;
}

/* 给有显式font-size的div添加.font-sized类，让其下的p继承父元素字体 */
div.font-sized p {
  font-size: inherit;
}

使用时只需给对应div添加类：

<!-- 未显式设置font-size，p为14px -->
<div>
  <p>Hello</p>
</div>

<!-- 显式设置font-size，p继承16px -->
<div class="font-sized" style="font-size:16px;">
  <p>Hello</p>
</div>

内容的提问来源于stack exchange，提问作者Obiwahn