CSS规则以减小当前元素下方所有元素的字体大小

Question

我正在研究Introduction to Linux as edX。学习页面的菜单字体大小为14px，实际内容为12px。我想减小菜单的字体大小，以便占用更少的空间。简单地使div更细不是解决方案，它需要较小的字体。

我可以在菜单的最高div中添加什么CSS规则来影响所有子div的字体大小？我尝试了style="font-size:0.5em"，style="font-size:50%"和style="font-size:8px"，但是这些都无法克服为内部div定义的CSS。

我强调说，这个问题与我无法控制的网站有关，而我正在尝试使用Firefox Inspect Element功能添加规则。

Answer 1

不是很漂亮，但是

.menu * { font-size: 11px !important; }

可能是您想要的。或者，

.menu { transform: scale(0.8); }

尽管可能以不希望的方式影响其他事物。

您也可以尝试使用非标准的：

.menu { zoom: 80%; }

Answer 2

仅在子元素也使用0.5em单位时，才在父元素上设置em的字体大小。在相关页面上，似乎使用了其他单位（可能是px）。在这种情况下，可以使用父元素上的font-size-adjust属性来减小所有子字体的大小。 font-size-adjust通常用于根据“ x-height”定义字体大小，因此您应该尝试使用font-size-adjust左右的值。

编辑：正如@Jackson指出的那样，0.5 font-size-adjust，但这也许对您已经足够了。

Answer 3

我能想到的影响整个页面的最快方法是通过使用百分比来增加正文或html标签的字体大小。我建议先检查是否设置了body或html标签上的字体大小。如果是的话，增加它，它将级联整个文档。如果未设置，我将其设置为120％，然后查看结果是否符合我的期望。这将影响您不想增加的父元素，因此只需在检查器中选择它并减小该元素的字体大小即可。