赋予不同的单元格颜色

Question

如何在每个单元格上设置不同的颜色。我所做的只是使整个红色，只是前3个单元格只有黄色蓝色和红色。怎么会这样？我应该参考具体的<td>？我看到了这个问题，但这并不是我正在搜索的内容。

body {
  background: #000;
}

#wrap {
  margin: 0 auto;
  /* margin 0 auto will center that box in your document */
  width: 780px;
  /*size of your box*/
  background: #000;
  text-align: center;
  /* everything will be written in that box will be centered horizontaly*/
}

td:hover {
  background-color: #ff0000;
  color: #000000;
}

<div id="wrap">
  <table width="780">
    <tr>
      <td align="center">
        <table border=1>
          <tbody>
            <!-- Results table headers -->
            <tr>
              <th>Messages Per Month</th>
              <th>1 Month Pricing</th>
              <th>3 Month Pricing</th>
              <th>12 Month Pricing</th>
            </tr>
            <tr>
              <td>500</td>
              <td>$14.95/Month</td>
              <td>$12.95/Month</td>
              <td>$9.95/Month</td>
            </tr>
            <tr>
              <td>1,000</td>
              <td>$24.95/Month</td>
              <td>$20.95/Month</td>
              <td>$17.95/Month</td>
            </tr>
            <tr>
              <td>1,500</td>
              <td>$37.95/Month</td>
              <td>$31.95/Month</td>
              <td>$26.95/Month</td>
            </tr>
            <tr>
              <td>2,000</td>
              <td>$49.95/Month</td>
              <td>$41.95/Month</td>
              <td>$35.95/Month</td>
            </tr>
            <tr>
              <td>2,500</td>
              <td>$62.95/Month</td>
              <td>$52.95/Month</td>
              <td>$44.95/Month</td>
            </tr>
            <tr>
              <td>5,000</td>
              <td>$119.95/Month</td>
              <td>Not Available</td>
              <td>Not Available</td>
            </tr>
            <tr>
              <td>7,500</td>
              <td>$179.95/Month</td>
              <td>Not Available</td>
              <td>Not Available</td>
            </tr>
            <tr>
              <td>10,000</td>
              <td>$219.95/Month</td>
              <td>Not Available</td>
              <td>Not Available</td>
            </tr>
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </table>
</div>

Answer 1

你可以使用nth-childcss psuedoselectors：

    td:nth-child(1) {
        color: yellow;
        background-color: #AAA;
    }
    td:nth-child(2) {
        color: red;
    }
    td:nth-child(3) {
        color: blue;
    }

<table>
<tr>
<td>Yellow</td>
<td>Red</td>
<td>Blue</td>
<td>Normal</td>
</tr>
</table>

Answer 2

尝试在元素上使用nth-child，这里有一个quick reference 用于各种选择。

td:nth-child(odd) {
  color: green;
}

td:nth-child(even) {
  color: red;
}

td {
  border: 1px solid gray;
}

<table>
  <tr>
    <td>2,500</td>
    <td>$62.95/Month</td>
    <td>$41.95/Month</td>
    <td>$35.95/Month</td>
  </tr>
  <tr>
    <td>1,500</td>
    <td>$52.95/Month</td>
    <td>$31.95/Month</td>
    <td>$25.95/Month</td>
  </tr>
</table>

Answer 3

首先让我们创建一个简化版的表格。

        table tr td{
            border:2px solid black;
            width:70px;height:30px;
            text-align: center;
        }
        table{
            border-collapse: collapse;
        }

        table:hover tr td:nth-child(1){
            background: yellow;
        }

        table:hover tr td:nth-child(2){
            background:blue;
        }
        table:hover tr td:nth-child(3){
            background:red;
        }

    <table>
        <tr>
            <td>one</td>
            <td>two</td>
            <td>three</td>
            <td>four</td>

        </tr>

        <tr>
            <td>five</td>
            <td>six</td>
            <td>seven</td>
            <td>eight</td>
        </tr>

        <tr>
            <td>nine</td>
            <td>ten</td>
            <td>eleven</td>
            <td>twelve</td>
        </tr>
    </table>

让我给你一点解释.. table:hover tr td:nth-child(1) 部分，首先是 table:hover 部分，当我们将鼠标悬停到整个表格时，我们要定位所有的 tr，在 table 里面，然后在 tr 里面，我们只想选择每个 tr 的第一个 td ":nth-child(1)"，所以这只会选择和改变背景颜色如果我们将鼠标悬停在表格的整个主体上，则一个、五个和九个 td（表格的第一列）颜色为黄色。

PS：对我来说，我准备在 JavaScript 上做这件事。