gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:48:29 24 4
gpt4 key购买 nike

我正在研究 Bootstrap 4 中的表格。我不知道为什么不应用台灯类中的背景颜色。这是因为台灯无法覆盖暗灯吗?如果是真的,你能告诉我是什么让 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 -->

问题:

enter image description here

最佳答案

这就是.thead-lightBootstrap 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;
}

关于html - 上下文类不能覆盖表头颜色类 (.thead-dark/.thead-light),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48854687/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com