Css 覆盖某些行的引导表悬停

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 css和这个代码来覆盖td的颜色和文本的颜色。我的问题是,如何也覆盖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吗?是的,现在添加。