Html CSS：所选元素未按应有的方式响应_Html_Css

Html CSS：所选元素未按应有的方式响应

html css

Html CSS：所选元素未按应有的方式响应,html,css,Html,Css,因此，我尝试使用HTML表格和CSS构建一个棋盘。我已经设法做到了交替瓷砖的“硬”部分，但是，周围的单元格（A、B、C……）应该是完全不同的颜色然而，当我选择它们并设置不同的颜色时，它们并不能正常工作。他们所做的只是变暗。这是我的CSS： table{ margin: auto; border-collapse: collapse; } td{ text-align: center; font-weight: bold; } tr{ height:

因此，我尝试使用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>


A.
B
C
D
E
F
G
H
8.
8.
7.
7.
6.
6.
5.
5.
4.
4.
3.
3.
2.
2.
1.
1.
A.
B
C
D
E
F
G
H

谢谢你花时间帮忙。好好休息一天

您始终可以为周围的行设置一个类。并将css应用于覆盖

就像我给那一行指定了类

环绕
并添加了以下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);
}


表格{
保证金：自动；
边界塌陷：塌陷；
}
运输署{
文本对齐：居中；
字体大小：粗体；
宽度：40px；
}
tr{
高度：75px；
}
tr：第一个孩子，tr：最后一个孩子{
高度：30px；
颜色：白色；
背景色：黑色！重要；
}
td:第一个孩子，td:最后一个孩子{
宽度：30px；
颜色：白色；
背景色：黑色！重要；
}
tr:n个孩子（偶数）td:n个孩子（偶数），tr:n个孩子（奇数）td:n个孩子（奇数）{
背景：rgba（104,42,0,0.863）；
}
tr:n个孩子（奇数）td:n个孩子（偶数），tr:n个孩子（偶数）td:n个孩子（奇数）{
背景：rgba（148,67,0,0.5）；
}
tr.td:n个孩子（偶数）{
背景：rgba（256,0,0,0.863）；
}
tr.td:n个孩子（奇数）{
背景：rgba（0,256,0,0.5）；
}

A.
B
C
D
E
F
G
H
8.
8.
7.
7.
6.
6.
5.
5.
4.
4.
3.
3.
2.
2.
1.
1.
A.
B
C
D
E
F
G
H
您始终可以为周围的行指定一个类。并将css应用于覆盖
就像我给那一行指定了类环绕
并添加了以下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);
}


表格{
保证金：自动；
边界塌陷：塌陷；
}
运输署{
文本对齐：居中；
字体大小：粗体；
宽度：40px；
}
tr{
高度：75px；
}
tr：第一个孩子，tr：最后一个孩子{
高度：30px；
颜色：白色；
背景色：黑色！重要；
}
td:第一个孩子，td:最后一个孩子{
宽度：30px；
颜色：白色；
背景色：黑色！重要；
}
tr:n个孩子（偶数）td:n个孩子（偶数），tr:n个孩子（奇数）td:n个孩子（奇数）{
背景：rgba（104,42,0,0.863）；
}
tr:n个孩子（奇数）td:n个孩子（偶数），tr:n个孩子（偶数）td:n个孩子（奇数）{
背景：rgba（148,67,0,0.5）；
}
tr.td:n个孩子（偶数）{
背景：rgba（256,0,0,0.863）；
}
tr.td:n个孩子（奇数）{
背景：rgba（0,256,0,0.5）；
}

A.
B
C
D
E
F
G
H
8.
8.
7.
7.
6.
6.
5.
5.
4.
4.
3.
3.
2.
2.
1.
1.
A.
B
C
D
E
F
G
H
您正在所有
中选择所有
，并使用alpha值应用背景，因此当您更改
的颜色时，它看起来会变暗或变亮
您需要做的是像这样跳过第一个和最后一个
：
tr:not(:first-child):not(:last-child)

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

并像这样跳过每个
中的第一个和最后一个
：
tr:not(:first-child):not(:last-child)

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)

一点也不复杂，但很难阅读。在这里必须使用类

表格{
保证金：自动；
边界塌陷：塌陷；
}
运输署{
文本对齐：居中；
字体大小：粗体；
宽度：80px；
}
tr{
高度：75px；
}
tr：第一个孩子，
tr：最后一个孩子{
高度：30px；
颜色：白色；
背景色：橙色！重要；
}
td：第一个孩子，
td：最后一个孩子{
宽度：30px；