Css 覆盖某些行的引导表悬停
我有一个引导表,在其中的某些行中,我使用table light css和这个代码来覆盖td的颜色和文本的颜色。我的问题是,如何也覆盖table light类的悬停颜色Css 覆盖某些行的引导表悬停,css,bootstrap-4,hover,overriding,Css,Bootstrap 4,Hover,Overriding,我有一个引导表,在其中的某些行中,我使用table light css和这个代码来覆盖td的颜色和文本的颜色。我的问题是,如何也覆盖table light类的悬停颜色 .table-light, .table-light > th, .table-light > td { background-color: #F5F5F5; color: #424242; } 如果我尝试这样做,它是有效的,但不适用于使用table light类的行,只适用于未定义类的行。那么,我如何才能仅更
.table-light,
.table-light > th,
.table-light > td {
background-color: #F5F5F5;
color: #424242;
}
如果我尝试这样做,它是有效的,但不适用于使用table light类的行,只适用于未定义类的行。那么,我如何才能仅更改台灯的悬停
.table-hover> tbody> tr:hover{
background-color:yellow;
}
下面是正在使用的html表的示例
<div class="table-responsive">
<table class="table table-hover team-schedule team-schedule--full">
<thead>
<tr>
<th class="team-schedule__date"></th>
<th class="team-schedule__versus"></th>
<th class="team-schedule__status"></th>
<th class="team-schedule__time"></th>
<th class="team-schedule__compet"></th>
<th class="team-schedule__venue"></th>
<th class="team-schedule__tickets"></th>
</tr>
</thead>
<tbody>
<tr data-date="2019-05-27 00:00:00">
<td class="team-schedule__date">2019-05-27</td>
<td class="team-schedule__versus">
<div class="team-meta">
<figure class="team-meta__logo">
<img src="assets/ll.png">
</figure>
<div class="team-meta__info">
<h6 class="team-meta__name"></h6>
<span class="team-meta__place"></span>
</div>
</div>
</td>
<td class="team-schedule__versus">
<div class="team-meta">
<figure class="team-meta__logo">
<img src="assets/l.png">
</figure>
<div class="team-meta__info">
<h6 class="team-meta__name"></h6>
<span class="team-meta__place"></span>
</div>
</div>
</td>
<td class="team-schedule__status"></td>
<td class="team-schedule__compet"></td>
<td class="team-schedule__compet"></td>
<td class="team-schedule__tickets"></td>
</tr>
<tr class="table-light" data-date="2019-05-30 00:00:00">
<td class="team-schedule__date">2019-05-30</td>
<td class="team-schedule__versus">
<div class="team-meta">
<figure class="team-meta__logo">
<img src="assets/t.png">
</figure>
<div class="team-meta__info">
<h6 class="team-meta__name"></h6>
<span class="team-meta__place"></span>
</div>
</div>
</td>
<td class="team-schedule__versus">
<div class="team-meta">
<figure class="team-meta__logo">
<img src="assets/n.png">
</figure>
<div class="team-meta__info">
<h6 class="team-meta__name"></h6>
<span class="team-meta__place"></span>
</div>
</div>
</td>
<td class="team-schedule__status"></td>
<td class="team-schedule__compet"></td>
<td class="team-schedule__compet"></td>
<td class="team-schedule__tickets"></td>
</tr>
</tbody>
</table>
</div>
2019-05-27
2019-05-30
您可以使用悬停。这是一个伪类。看看这个,你还可以练习并找到其他有用的css技巧
.table-light td:hover {
background-color: #000000;
color: #FFFFFF;
}
您可以使用hover。这是一个伪类。看看这个,你还可以练习并找到其他有用的css技巧
.table-light td:hover {
background-color: #000000;
color: #FFFFFF;
}
很抱歉,添加该部分时没有发生任何问题。请确保类名相同。我看到您添加了更多的代码,但现在是table-hover。是的,类名相同(table light),我将您提供的代码放在我allready的代码之后。我在原始帖子中添加的代码适用于未设置为使用table light类的行。抱歉,添加该部分时没有发生任何问题。请确保类名相同。我看到您添加了更多的代码,但现在是table-hover。是的,类名相同(table light),我将您提供的代码放在我allready的代码之后。我在原始帖子中添加的代码适用于未设置为使用table light类的行。你也可以添加示例HTML吗?是的,现在添加。你也可以添加示例HTML吗?是的,现在添加。