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

Question

我遇到了 css 的问题。我在 css 中使用 * 选择器（我也将 Bootstrap 和 jQuery DataTable 库与 CSS 一起使用。我个人CSS（最后注明最重要）我有：

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

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

如果我为某些元素指定一种样式来更改字体大小，它在某些元素（如 span 或 div 中有效，但在 tables 中不起作用，无论是在父 div 的 table.

.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-->

即使我在 table 的 html 中插入样式，它也不起作用。如果我将 *{font-size:14px;} 更改为 body{font-size:14px;}，则 tablaJquery 样式可以正常工作，但导航栏大小不应用 14px 字体大小并变得不同（更大）尊重其他元素。

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

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

非常感谢

Answer 1

发生这种情况是因为您告诉 DOM 通过 universal selector 将 ALL 元素 font-size 样式设置为 14px。

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

debug picture

10px font-size 值未应用于 children，因为通用选择器已经对其应用规则；因此，font-size、inherit（从其祖先继承）的默认值是不需要的，也被忽略了。

换句话说，通用选择器正在做这样的事情：

* > * > * etc etc

这也可以用您的 div 示例来证明：

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

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

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

CSS font-size won't apply when using universal selector too

css

selector