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中插入样式，也无法使用。如果我通过正文更改{{font-size：14px;}} {font-size：14px;}，tablaJquery样式可以正常工作，但导航栏大小不会应用14px字体大小，并且会尊重其他元素（不同） 。

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

¿任何想法为什么表没有得到指定的样式？

非常感谢

Answer 1

之所以发生这种情况，是因为您要告诉DOM通过universal selector用14px设置ALL元素的样式。

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

debug picture

10px值未应用于子项，因为通用选择器已经对其应用了规则；因此，不需要字体大小的默认值inherit，也可以将其忽略。

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

* > * > * etc etc

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

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

使用*选择器has no effect on specifity，但这不是专门的问题，仅是您已将规则应用于所有元素的问题，因此它们不使用各自的默认值。表具有行，主体和标题，并且由于您没有为<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>