赋予不同的细胞颜色

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>.95/Month</td>
              <td>.95/Month</td>
              <td>.95/Month</td>
            </tr>
            <tr>
              <td>1,000</td>
              <td>.95/Month</td>
              <td>.95/Month</td>
              <td>.95/Month</td>
            </tr>
            <tr>
              <td>1,500</td>
              <td>.95/Month</td>
              <td>.95/Month</td>
              <td>.95/Month</td>
            </tr>
            <tr>
              <td>2,000</td>
              <td>.95/Month</td>
              <td>.95/Month</td>
              <td>.95/Month</td>
            </tr>
            <tr>
              <td>2,500</td>
              <td>.95/Month</td>
              <td>.95/Month</td>
              <td>.95/Month</td>
            </tr>
            <tr>
              <td>5,000</td>
              <td>9.95/Month</td>
              <td>Not Available</td>
              <td>Not Available</td>
            </tr>
            <tr>
              <td>7,500</td>
              <td>9.95/Month</td>
              <td>Not Available</td>
              <td>Not Available</td>
            </tr>
            <tr>
              <td>10,000</td>
              <td>9.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-child css 伪选择器：

    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>.95/Month</td>
    <td>.95/Month</td>
    <td>.95/Month</td>
  </tr>
  <tr>
    <td>1,500</td>
    <td>.95/Month</td>
    <td>.95/Month</td>
    <td>.95/Month</td>
  </tr>
</table>

Answer 3

首先让我们创建一个简化版本的 table。

        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 部分，当我们将鼠标悬停在整个 table 上时，我们想要定位所有 tr，在 table 内，然后在 tr 内，我们只想定位 select每个 tr 的第一个 td“:nth-child(1)”，所以这只会 select 并更改一、五和九 td 的背景颜色（这是 [= 的第一列35=]) 如果我们将鼠标悬停在 table.

的整个 body 上，则颜色变为黄色

PS：对我来说，我准备在JavaScript做这个。

赋予不同的细胞颜色

Give on different cells colors

html

css

html-table

cells