在使用 Bootstrap v5.3.3 构建条纹 Bootstrap 表时，我需要能够使用 Bootstrap“table-danger”类显示一些具有红色背景的单元格。我还需要能够使用“表警告”类突出显示整行。但是我无法产生预期的结果。
在下面的示例中，最后一列的所有单元格都具有“table-danger”类别。使用CSS，我希望所有在带有“table-warning”类的tr内具有“table-danger”类的td元素都具有#fff3cd背景颜色。
理论上，第 1 行和第 2 行应该显示预期的行为。但实际上，只有第 2 行显示预期行为。 #1 行的背景仍然是红色，但它应该是黄色。如果我检查“纽约”单元格，背景颜色值符合预期，但它不显示该值。
我不明白是什么导致了这种行为。
/* Higher specificity to target the table-danger cells inside table-warning rows */
tr.table-warning td.table-danger {
background-color: #fff3cd !important;
/* Ensure the table-warning background color is applied */
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container mt-5">
<table class="table table-striped">
<thead>
<tr class="table-warning">
<th scope="col">Row</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr class="table-warning">
<td>#1</td>
<td>John Doe</td>
<td>25</td>
<td class="table-danger">New York</td>
</tr>
<tr class="table-warning">
<td>#2</td>
<td>Jane Smith</td>
<td>30</td>
<td class="table-danger">London</td>
</tr>
<tr>
<td>#3</td>
<td>Mark Johnson</td>
<td>35</td>
<td class="table-danger">Paris</td>
</tr>
</tbody>
</table>
</div>
</body>问题在于具有 table-danger 类别的单元格位于具有 table-warning 类别的 tr 中。一个单元格不能有两种背景颜色。所以你必须做出选择。
这是解决您问题的代码：
.last-cell {
background-color: #fff3cd !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<body>
<div class="container mt-5">
<table class="table table-striped">
<thead>
<tr class="table-warning">
<th scope="col">Row</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr class="table-warning">
<td>#1</td>
<td>John Doe</td>
<td>25</td>
<td class="last-cell">New York</td>
</tr>
<tr class="table-warning">
<td>#2</td>
<td>Jane Smith</td>
<td>30</td>
<td class="last-cell">London</td>
</tr>
<tr>
<td>#3</td>
<td>Mark Johnson</td>
<td>35</td>
<td class="">Paris</td>
</tr>
</tbody>
</table>
</div>
</body>
</body>
</html>希望有帮助！