上下文类不能覆盖表头颜色类 (.thead-dark/.thead-light)答案

【问题标题】：Contextual Classes cannot override Table Head Colors Classes (.thead-dark/.thead-light)上下文类不能覆盖表头颜色类 (.thead-dark/.thead-light)
【发布时间】：2018-02-19 02:30:19
【问题描述】：

我正在学习 Bootstrap 4 中的表格。我不知道为什么不应用 table-light 类中的背景颜色。这是因为台灯不能覆盖黑暗吗？如果是真的，你能告诉我是什么让 thead-dark 优先吗？如果不是我想的，请给我解释一下背后的原因。

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

问题：

【问题讨论】：

Edit 您的问题并通过点击 "JavaScript/HTML/CSS sn-p" 在底部发布您的完整当前code snippet i> 图标。

标签： html css bootstrap-4

【解决方案1】：

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

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

【讨论】：

【解决方案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 标志（正如某些人可能建议的那样）只应保留用于快速测试，并且不应用作永久解决方案。（否则会导致维护的噩梦）

【讨论】：

他直接将 .table-light 应用于 th。所以它不是因为在定义之后/之前。只是 .table .thead-dark 的优先级高于 .table-light
@AlexeyAvdeyev 在这种特殊情况下，.table .thead-dark th 具有更高的特异性。那是对的。但如果两者具有完全相同的特异性，则最后定义的规则将胜出。