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通常用于根据＆＃34; x-height＆＃34;来定义字体大小，因此您应该尝试0.5周围的值。

编辑：正如@Jackson指出的那样，font-size-adjust only works on Firefox，但也许这对您来说已经足够好了。