当使用通用选择器时，CSS字体大小也不适用。

Question

我面临一个css的问题。我在css中使用*选择器(我也对CSS使用Bootstrap和jQuery DataTable库)。在我的个人CSS中(最后指出是最重要的)，我有：

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

*选择器对我来说很好，因为它有助于减少导航条引导带的大小，并使所有这些元素与页面上的所有其他样式保持一致。

如果我指示某个元素更改字体大小的样式，则它在某些元素(如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;}更改body{font-size:14px;}，tablaJquery样式工作得很好，但是导航条大小不适用于14 by字体大小，并且得到不同(更大)的尊重其他元素。

我试着分别使用body{font-size:14px}和更改导航条大小，但效果不太好。

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

非常感谢

Answer 1

之所以会发生这种情况，是因为您告诉DOM通过universal selector将所有元素的字体大小设置为14 is。

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

调试图片

10 is字体大小值不应用于子程序，因为通用选择器已经对其应用了一条规则；因此，字体大小的默认值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>

​