Question

我正在研究Bootstrap 4中的表格。我不知道为什么桌面灯类中的背景颜色没有应用。这是因为桌灯不能覆盖thead-dark？如果这是真的，你能告诉我是什么让the-dark优先考虑？如果不是我的想法，请为我解释背后的原因。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
	<title>Table</title>
</head>
<body>
<div class="container">
  <h2>Contextual Classes</h2>
  <p>Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:</p>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th class="table-light">Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>def@somemail.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>Joe</td>
        <td>joe@example.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>Secondson</td>
        <td>sec@example.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>Angie</td>
        <td>angie@example.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>Bo</td>
        <td>bo@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
</body> <!-- source: https://www.w3schools.com/bootstrap4/bootstrap_tables.asp -->

＆＃13;

问题：

Answer 1

这是Bootstrap stylesheet中定义.thead-light的方式。

.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

您会看到它定位th元素，这些元素是具有thead-light类的元素的后代。

因此，当您将类应用于th元素时，就像在

中一样

<th class="table-light">Firstname</th>

你需要定位

th.thead-light {
   /* CSS */
}

否则.table-dark > th的特异性将覆盖<th class="table-light">

的特异性

.table-dark,
.table-dark > th, /* <<< This rule */
.table-dark > td {
  background-color: #c6c8ca;
}

Answer 2

在bootstrap.css此规则中：

.table .thead-dark th {
  color: #fff;
  background-color: #212529;
  border-color: #32383e;
}

在此规则之后定义为：

.table-light, .table-light > th, .table-light > td { background-color: #fdfdfe; }

但最重要的是：

当您使用CSS Specificity Calculator并对此进行比较时： th.table-light（这里实际使用的是.table .thead-dark th，你会看到后者具有更高的特异性，因此无论如何都会获胜。

结论：

为了使css规则“获胜”（即优先），它必须具有比竞争性css规则更高的特异性或者如果特异性相同（这里不）），必须在竞争css规则之后列出。

另请注意：

使用!important标志（正如某些人可能建议的那样）应仅保留用于快速测试，并且不应用作永久解决方案。（因为否则会导致维护的噩梦）

上下文类不能覆盖表头颜色类（.thead-dark / .thead-light）

2 个答案:

但最重要的是：

结论：