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; 背景色：黑色; 边距：20像素; } #top tr：first-child td：nth-child（1）{ 背景色：＃00F; }

我找到了类似的答案：

但是，它们都不起作用，我甚至可以在那里提出更多不起作用的答案，但我认为这已经足够了。我需要2016年更新。

我实际上要做的是制作其中一个“顶级菜单”的东西，当你翻转时，单元格的背景将变为白色，文本将变为黑色。问题是高度是65px，我不能让整个事情变成白色，只有突出显示的文字。

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

Answer 1

为CSS添加了以下rulsets：

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;
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: