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>小（所以现在比{{1}小两倍） }）等。

您可以了解有关选择器here的更多信息。

Answer 2

我的元素选择器#element div和#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>

$list = [];
foreach($phones as $phone){
    $list[] = new Sms($sender, $phone, $message, "18");
}
call_user_func_array(array($instance, "sendBatchSMS"), $list);

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

2 个答案: