在构建条纹 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><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-warning table table-striped">
<thead>
<tr>
<th scope="col">Row</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr>
<td>#1</td>
<td>John Doe</td>
<td>25</td>
<td class="bg-danger">New York</td>
</tr>
<tr>
<td>#2</td>
<td>Jane Smith</td>
<td>30</td>
<td class="bg-danger">London</td>
</tr>
<tr>
<td>#3</td>
<td>Mark Johnson</td>
<td>35</td>
<td class="bg-danger">Paris</td>
</tr>
</tbody>
</table>
</div>
</body>