html - 如何在类内的一个表格单元格中用背景色填充整个单元格

Question

我在一个表中有一个表行，在那个表行中，我有四个 <td>对象:

<table id="top">
<tr>
    <td class="topitem" style="float:left; margin-left:10px;" id="topone">Home</td>
    <td class="topitem" id="toptwo">Go To Channel</td>
    <td class="topitem" id="topthree">Other things I like to do</td>
    <td class="topitem" id="about" id="topfour">About</td>
</tr>
</table>

在我的 css 中，我试图从四个中选出第一个，如下所示: ＃顶部 { 高度:65px； 背景色:黑色； 边距顶部:20px； } #top tr:first-child td:nth-child(1) { 背景色:#00F；

我找到了类似的答案:

• > One answer
• > Another answer
• > Again another answer

但是，它们都不起作用，我什至可以在其中放置更多不起作用的答案，但我认为这就足够了。我需要 2016 年的更新。

我实际上想做的是制作那些“顶级菜单”之一，当您将鼠标悬停在其中时，单元格的背景将变为白色，而文本将变为黑色。问题是 height 是 65px，我不能让整个东西变成白色，只有突出显示的文本。

但是，就目前而言，我不会为此担心。我只需要知道如何使背景颜色适合整个表格单元格。

Answer 1

为 CSS 添加了以下规则集:

td {
  background: #ede;
  color: #112;
  transition: background 0.4s ease-out, color 0.4s ease-out;
  cursor: pointer;
}
td:first-of-type:hover {
  background: #112;
  color: #ede;
  transition: background 0.4s ease-in, color 0.4s ease-in;
}

td {
  background: #ede;
  color: #112;
  transition: background 0.4s ease-out, color 0.4s ease-out;
  cursor: pointer;
}
td:first-of-type:hover {
  background: #112;
  color: #ede;
  transition: background 0.4s ease-in, color 0.4s ease-in;
}

<table id="top">
  <tr>
    <td class="topitem" style="float:left; margin-left:10px;" id="topone">Home</td>
    <td class="topitem" id="toptwo">Go To Channel</td>
    <td class="topitem" id="topthree">Other things I like to do</td>
    <td class="topitem" id="topfour">About</td>
  </tr>
  <tr>
    <td class="miditem" style="float:left; margin-left:10px;" id="midone">Row2</td>
    <td class="miditem" id="midtwo">Go To Channel</td>
    <td class="miditem" id="midthree">Other things I like to do</td>
    <td class="miditem" id="midfour">About</td>
  </tr>
  <tr>
    <td class="lastitem" style="float:left; margin-left:10px;" id="lastone">Row 3</td>
    <td class="lastitem" id="lasttwo">Go To Channel</td>
    <td class="lastitem" id="lastthree">Other things I like to do</td>
    <td class="lastitem" id="lastfour">About</td>
  </tr>
</table>