如何阻止 WebKit 递归减小字体大小？

Question

我正在使用 WebKit，我正在尝试减小一个元素及其所有内容的字体大小。这是元素的示例：

<div id="element">
<div>The element has a sub-element with <i>italic</i>, <strong>strong</strong> and other tags.</div>
</div>

这个 CSS 根本不会缩小字体：

#element {
    font-size: smaller;
}

如果我只选择内部<div>，<i> 和<strong> 的字体大小不会减小：

#element div {
    font-size: smaller;
}

我无法单独选择每个标签，因为我不知道所有可能的嵌套标签。最后的机会是使用星号：

#element * {
    font-size: smaller;
}

但是这个 CSS 效果更差：它递归地减小每个嵌套标签的大小。

此行为非常意外，无法在 Chrome 中重现。这是WebKit的错误吗？是否可以禁用递归减小字体大小的“功能”？

Answer 1

你可以使用> *选择器

#element > * {
    font-size: smaller;
}

这将选择每个标记为#element 的直接子标记，但不会更深入。

您编写的选择器 - #element * - 将样式应用于 #element 内的每个元素，无论它是直接子元素还是非常嵌套的元素。所以这发生在你的例子中：<div> 的字体大小比#element 小，<i> 的字体大小比<div> 小（所以现在它比#element 小两倍）等等。

您可以阅读有关选择器的更多信息here。

Answer 2

我的元素选择器#element 和#element div 可以正常工作。也就是说，里面的所有元素都减少了。尝试运行我在下面编写的 sn-p 代码，如果一切正常，那么很可能您在代码的其他位置指定了不同的字体大小。如果在sn-p中没有减少，那么可能是浏览器有问题。如果有任何困难，请写在评论中，我准备帮助您解决问题。

#element {
    font-size: smaller;
}

#element2 div {
    font-size: smaller;
}

<div id="element"><div>If you accept font-size smaller to id #element then everything is reduced as needed including <i>italic</i> and <strong>strong</strong></div></div>

<div id="element2"><div>If you accept font-size smaller to div inside #element2 then everything is reduced as needed also including <i>italic</i> and <strong>strong</strong></div></div>