css - CSS font-size 在使用通用选择器时也不会适用

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 中插入样式，它也不起作用。如果我*{font-size:14px;}通过body{font-size:14px;}tablaJquery 样式更改效果很好，但导航栏大小不应用 14px 字体大小并获得不同（更大）尊重其他元素。

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

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

非常感谢

标签： cssselector

Answer 1

发生这种情况是因为您告诉DOM通过universal selector.

如果您查看调试控制台，您会看到.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>

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

这是一个外观示例以及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>