时间戳

首页 > 解决方案 > 为什么类属性不覆盖通用属性？

html - 为什么类属性不覆盖通用属性？

问题描述

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Berlin Sans FB';
}

我已将上述内容放在我的 CSS 的顶部，并且

.table-dark {
    font-family: 'Times New Roman', Times, serif !important;
}

这最后一个。

我正在使用Bootstrap。

在这里，只有font-family: 'Berlin Sans FB';浏览器正在使用，而不是最后一个，即font-family: 'Times New Roman', Times, serif !important;

我想用最后一个。现在，我该怎么办？

标签： htmlcss

解决方案

您遇到了级联的症结，也是很多人避免使用通配符选择器的原因。

通配符选择器适用于所有对象，它不会将样式应用为继承。您可能认为这*{}确实影响了<html>or<body>元素，但实际上它直接应用于所有元素。因此，它*{}比从元素父级继承的样式具有更高的特异性。

.table-dark是一个容器类，因此，您可能在它和内容之间有<tbody>、<tr>和元素。<td>这是阻止<table>元素传递其字体。可以这样想：

body {
  font-family: helvetica;
}
table {
  font-family: arial;
}
<body> <!-- helvetica -->
  <div> <!-- inherited helvetica -->
    <table> <!-- arial -->
      <tbody> <!-- inherited arial -->
        <tr> <!-- inherited arial -->
          <td> <!-- inherited arial -->
            content <!-- inherited arial -->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

在这里，<body>将 Helvetica 传递给<div>，但它没有将它传递给 table，因为 table 是在 CSS 中定义的。但是，您已将其分配给所有元素，如下所示：

* {
  font-family: helvetica;
}
table {
  font-family: arial;
}
<body> <!-- helvetica -->
  <div> <!-- helvetica -->
    <table> <!-- arial -->
      <tbody> <!-- helvetica -->
        <tr> <!-- helvetica -->
          <td> <!-- helvetica -->
            content <!-- helvetica -->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

推荐阅读