CSS: 选定的元素没有做出应有的反应

问题描述 投票：0回答：1

所以我想用HTML表格和CSS来制作一个棋盘。我已经成功地完成了 "困难 "的部分，有了交替的瓷砖，但是，周围的单元格（A, B, C, ...）应该是完全不同的颜色。

然而，当我选择它们并设置不同的颜色时，它们却不能正常工作。它们所做的就是变暗。

这是我的CSS。

table{
    margin: auto;
    border-collapse: collapse;
}

td{
    text-align: center;
    font-weight: bold;
}
tr{
    height: 75px;
}
tr:first-child, tr:last-child{
    height: 30px;
    color: white;
    background-color: black!important;
}
td:first-child, td:last-child{
    width: 30px;
    color: white;
    background-color: black!important;
}
tr:nth-child(even) td:nth-child(even), tr:nth-child(odd) td:nth-child(odd){
    background: rgba(104, 42, 0, 0.863);
  }
tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd){
    background: rgba(148, 67, 0, 0.5);
}

这是HTML

<table>
        <tr>
            <td></td>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            <td>E</td>
            <td>F</td>
            <td>G</td>
            <td>H</td>
            <td></td>
        </tr>

        <tr>
            <td>8</td>
            <td><img src="rook-b.png" alt="" srcset=""></td>
            <td><img src="knight-b.png" alt="" srcset=""></td>
            <td><img src="bishop-b.png" alt="" srcset=""></td>
            <td><img src="king-b.png" alt="" srcset=""></td>
            <td><img src="queen-b.png" alt="" srcset=""></td>
            <td><img src="bishop-b.png" alt="" srcset=""></td>
            <td><img src="knight-b.png" alt="" srcset=""></td>
            <td><img src="rook-b.png" alt="" srcset=""></td>
            <td>8</td>
        </tr>

        <tr>
            <td>7</td>
            <td><img src="pawn-b.png" alt="" srcset=""></td>
            <td><img src="pawn-b.png" alt="" srcset=""></td>
            <td><img src="pawn-b.png" alt="" srcset=""></td>
            <td><img src="pawn-b.png" alt="" srcset=""></td>
            <td><img src="pawn-b.png" alt="" srcset=""></td>
            <td><img src="pawn-b.png" alt="" srcset=""></td>
            <td><img src="pawn-b.png" alt="" srcset=""></td>
            <td><img src="pawn-b.png" alt="" srcset=""></td>
            <td>7</td>
        </tr>

        <tr>
            <td>6</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>6</td>
        </tr>

        <tr>
            <td>5</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>5</td>
        </tr>

        <tr>
            <td>4</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>4</td>
        </tr>

        <tr>
            <td>3</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>3</td>
        </tr>

        <tr>
            <td>2</td>
            <td><img src="pawn-w.png" alt="" srcset=""></td>
            <td><img src="pawn-w.png" alt="" srcset=""></td>
            <td><img src="pawn-w.png" alt="" srcset=""></td>
            <td><img src="pawn-w.png" alt="" srcset=""></td>
            <td><img src="pawn-w.png" alt="" srcset=""></td>
            <td><img src="pawn-w.png" alt="" srcset=""></td>
            <td><img src="pawn-w.png" alt="" srcset=""></td>
            <td><img src="pawn-w.png" alt="" srcset=""></td>
            <td>2</td>
        </tr>

        <tr>
            <td>1</td>
            <td><img src="rook-w.png" alt="" srcset=""></td>
            <td><img src="knight-w.png" alt="" srcset=""></td>
            <td><img src="bishop-w.png" alt="" srcset=""></td>
            <td><img src="king-w.png" alt="" srcset=""></td>
            <td><img src="queen-w.png" alt="" srcset=""></td>
            <td><img src="bishop-w.png" alt="" srcset=""></td>
            <td><img src="knight-w.png" alt="" srcset=""></td>
            <td><img src="rook-w.png" alt="" srcset=""></td>
            <td>1</td>
        </tr>

        <tr>
            <td></td>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>D</td>
            <td>E</td>
            <td>F</td>
            <td>G</td>
            <td>H</td>
            <td></td>
        </tr>
    </table>

谢谢你花时间来帮助我 祝你今天休息愉快

html css
1个回答
1
投票

你总是可以给你周围的行一个类，并应用CSS来覆盖

就像我上过的课 surrounding 到该行

并添加了以下CSS

tr.surrounding td:nth-child(even) {
    background: rgba(256, 0, 0, 0.863);
  }
tr.surrounding td:nth-child(odd) {
    background: rgba(0, 256, 0, 0.5);
}


table{
    margin: auto;
    border-collapse: collapse;
}

td{
    text-align: center;
    font-weight: bold;
    width: 40px;
}
tr{
    height: 75px;
}
tr:first-child, tr:last-child{
    height: 30px;
    color: white;
    background-color: black!important;
}
td:first-child, td:last-child{
    width: 30px;
    color: white;
    background-color: black!important;
}
tr:nth-child(even) td:nth-child(even), tr:nth-child(odd) td:nth-child(odd){
    background: rgba(104, 42, 0, 0.863);
  }
tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd){
    background: rgba(148, 67, 0, 0.5);
}

tr.surrounding td:nth-child(even) {
    background: rgba(256, 0, 0, 0.863);
  }
tr.surrounding td:nth-child(odd) {
    background: rgba(0, 256, 0, 0.5);
}
<table>
  <tr class="surrounding">
    <td></td>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td></td>
  </tr>

  <tr>
    <td>8</td>
    <td><img src="rook-b.png" alt="" srcset=""></td>
    <td><img src="knight-b.png" alt="" srcset=""></td>
    <td><img src="bishop-b.png" alt="" srcset=""></td>
    <td><img src="king-b.png" alt="" srcset=""></td>
    <td><img src="queen-b.png" alt="" srcset=""></td>
    <td><img src="bishop-b.png" alt="" srcset=""></td>
    <td><img src="knight-b.png" alt="" srcset=""></td>
    <td><img src="rook-b.png" alt="" srcset=""></td>
    <td>8</td>
  </tr>

  <tr>
    <td>7</td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td>7</td>
  </tr>

  <tr>
    <td>6</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>6</td>
  </tr>

  <tr>
    <td>5</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>5</td>
  </tr>

  <tr>
    <td>4</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>4</td>
  </tr>

  <tr>
    <td>3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>3</td>
  </tr>

  <tr>
    <td>2</td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td>2</td>
  </tr>

  <tr>
    <td>1</td>
    <td><img src="rook-w.png" alt="" srcset=""></td>
    <td><img src="knight-w.png" alt="" srcset=""></td>
    <td><img src="bishop-w.png" alt="" srcset=""></td>
    <td><img src="king-w.png" alt="" srcset=""></td>
    <td><img src="queen-w.png" alt="" srcset=""></td>
    <td><img src="bishop-w.png" alt="" srcset=""></td>
    <td><img src="knight-w.png" alt="" srcset=""></td>
    <td><img src="rook-w.png" alt="" srcset=""></td>
    <td>1</td>
  </tr>

  <tr class="surrounding">
    <td></td>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td></td>
  </tr>
</table>
1
投票

你正在选择所有 <td> 在所有 <tr> 并应用alpha值的背景，所以当你改变了颜色的 <tr> 它看起来像变深或变浅了。

你需要做的是跳过第一个和最后一个。<tr> 像这样。

tr:not(:first-child):not(:last-child)

跳过第一个和最后一个 <td> 每每 <tr> 像这样。

td:not(:first-child):not(:last-child)

这是你的帽子。

tr:nth-child(even) td:nth-child(even)

这是新的

tr:not(:first-child):not(:last-child):nth-child(even) td:not(:first-child):not(:last-child):nth-child(even)

一点都不复杂，但很难读懂。这里必须使用类。

table {
  margin: auto;
  border-collapse: collapse;
}

td {
  text-align: center;
  font-weight: bold;
  width: 80px;
}

tr {
  height: 75px;
}

tr:first-child,
tr:last-child {
  height: 30px;
  color: white;
  background-color: orange !important;
}

td:first-child,
td:last-child {
  width: 30px;
  color: white;
  background-color: orange !important;
}

tr:not(:first-child):not(:last-child):nth-child(even) td:not(:first-child):not(:last-child):nth-child(even),
tr:not(:first-child):not(:last-child):nth-child(odd) td:not(:first-child):not(:last-child):nth-child(odd) {
  background: rgba(104, 42, 0, 0.863);
}

tr:not(:first-child):not(:last-child):nth-child(odd) td:not(:first-child):not(:last-child):nth-child(even),
tr:not(:first-child):not(:last-child):nth-child(even) td:not(:first-child):not(:last-child):nth-child(odd) {
  background: rgba(148, 67, 0, 0.32);
}
<table>
  <tr>
    <td></td>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td></td>
  </tr>

  <tr>
    <td>8</td>
    <td><img src="rook-b.png" alt="" srcset=""></td>
    <td><img src="knight-b.png" alt="" srcset=""></td>
    <td><img src="bishop-b.png" alt="" srcset=""></td>
    <td><img src="king-b.png" alt="" srcset=""></td>
    <td><img src="queen-b.png" alt="" srcset=""></td>
    <td><img src="bishop-b.png" alt="" srcset=""></td>
    <td><img src="knight-b.png" alt="" srcset=""></td>
    <td><img src="rook-b.png" alt="" srcset=""></td>
    <td>8</td>
  </tr>

  <tr>
    <td>7</td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td><img src="pawn-b.png" alt="" srcset=""></td>
    <td>7</td>
  </tr>

  <tr>
    <td>6</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>6</td>
  </tr>

  <tr>
    <td>5</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>5</td>
  </tr>

  <tr>
    <td>4</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>4</td>
  </tr>

  <tr>
    <td>3</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>3</td>
  </tr>

  <tr>
    <td>2</td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td><img src="pawn-w.png" alt="" srcset=""></td>
    <td>2</td>
  </tr>

  <tr>
    <td>1</td>
    <td><img src="rook-w.png" alt="" srcset=""></td>
    <td><img src="knight-w.png" alt="" srcset=""></td>
    <td><img src="bishop-w.png" alt="" srcset=""></td>
    <td><img src="king-w.png" alt="" srcset=""></td>
    <td><img src="queen-w.png" alt="" srcset=""></td>
    <td><img src="bishop-w.png" alt="" srcset=""></td>
    <td><img src="knight-w.png" alt="" srcset=""></td>
    <td><img src="rook-w.png" alt="" srcset=""></td>
    <td>1</td>
  </tr>

  <tr>
    <td></td>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td></td>
  </tr>
</table>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.