CSS字体大小在使用通用选择器时也不适用

Question

我遇到了css的问题。我在css中使用*选择器(我也使用带有CSS的Bootstrap和jQuery DataTable库(。在我的个人CSS中(最后指出是最重要的(，我有：

* { font-size:14px; }
.tablaJquery { font-size:10px; } /*doesn't apply in tables*/

*选择器对我来说效果很好，因为对于减小导航栏 Bootstrap 大小以及所有这些元素与页面上的所有其他样式保持一致很有用。

如果我为某些元素指示样式以更改字体大小，它适用于某些元素，例如 span 或div，但在表格的父div 中的表格中也不起作用。

.tablaJquery { font-size: 10px !important; }
<table id="tablaResumen" class="table tablaJquery" style="width:100%;"> <!--still have 14px font-size-->
<div class="tablaJquery">Hello</div> <!--get 10px font-size-->

即使我在表格的 html 中插入样式也不起作用。如果我通过body{font-size:14px;}tablaJquery 样式来更改*{font-size:14px;}，但导航栏大小不应用 14px 字体大小并获得不同(更大(尊重其他元素。

我尝试使用body{font-size:14px}并单独更改导航栏大小，但效果不佳。

知道为什么表格没有指定的样式吗？

多谢

Answer 1

发生这种情况是因为您告诉 DOM 通过universal selector将所有元素的字体大小设置为14px 的样式。

如果您查看调试控制台，您将看到.tablaJquery规则已应用，但仅应用于您分配给它的元素：

调试图片

10px font-size 值不会应用于子项，因为通用选择器已经对其应用了规则;因此，不需要 font-size 的默认值inherit(从其祖先继承(，并且也会被忽略。

换句话说，通用选择器正在执行如下操作：

* > * > * etc etc

这也可以通过您的div示例来演示：

<div class="tablaJquery">
<p>Hello</p> <!--get 14px font-size-->
</div> 

使用*选择器对指定性没有影响，但这不是指定性问题，这只是您已经将规则应用于所有元素的问题，因此它们不使用各自的默认值。表有行、正文和标题，由于您没有对<td>使用更具体的规则，因此它们遵循通用规则。

有很多方法可以使用选择器来做到这一点，因此您可以选择，但解决方案是更具体地有效地应用规则，如下面的代码片段所示：

* {
font-size: 14px;
}
.tablaJquery td {
font-size: 10px;
}

<table id="tablaResumen" class="table tablaJquery" style="width:100%;">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
</table>

但是，就其价值而言，我认为更好的方法是将字体设置为:root或html.这将为您节省很多样式问题，就像我们现在讨论的那样，更重要的是，它允许元素使用它们各自的默认值(如果您开始在其他元素上使用em或rem，或者与其他库规则冲突，这将是至关重要的。

下面是一个示例，说明它的外观以及如何应用inherit默认值：

html {
font-size: 14px;
}
.tablaJquery {
font-size: 10px;
}

<table id="tablaResumen" class="table tablaJquery" style="width:100%;">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
</table>