Javascript HTML行跨度与css元素冲突

我想我的代码可以说明一切

* {
保证金：0；
填充：0；
}
：根{
--颜色1:#c83349；
--颜色2:#fff；
}
桌子{
边界间距：0；
边框：1px纯紫色；
利润率：10px自动；
文本对齐：居中；
宽度：300px；
边框底部：无；
}
tr，
th，
运输署{
宽度：100px；
高度：100px；
}
th，
td:不是（第n个孩子（2））{
背景：重复线性梯度（45度，var（--color2）25%，var（--color2）50%，var（--color1）50%，var（--color1）75%）；
}
tr：最后一个孩子td{
底边：1px纯紫色；
}
运输署：第n名儿童（2）{
边框：1px纯紫色；
边框底部：无；
}
1.
2.
3.
4.
5.
6.
7.
8.

使用rowspan属性作为选择器，而不是第n个子项

*{
保证金：0；
填充：0；
}
：根{
--颜色1:#c83349；
--颜色2:#fff；
}
桌子{
边界间距：0；
边框：1px纯紫色；
利润率：10px自动；
文本对齐：居中；
宽度：300px；
边框底部：无；
}
tr，th，td{
宽度：100px；
高度：100px；
}
th，
td:不是（[rowspan]）{
背景：重复线性梯度（45度，变异（-color2）25%50%，变异（-color1）50%75%）；
}
tr：最后一个孩子td{
底边：1px纯紫色；
}
td[世界其他地区]{
边框：1px纯紫色；
边框底部：无；
}

1.
2.
3.
4.
5.
6.
7.
8.

当您使用

th，td:not（：nth child（2））

应用背景时，您排除了第二个子元素（td），最后一行只有两个元素，因此它显然不适用于最后一个元素。这里是您使用的类似版本，但我更喜欢使用id/class来排除特定元素

*
{
保证金：0；
填充：0；
}
：根
{
--颜色1:#c83349；
--颜色2:#fff；
}
桌子
{
边界间距：0；
边框：1px纯紫色；
利润率：10px自动；
文本对齐：居中；
宽度：300px；
边框底部：无；
}
tr，th，td
{
宽度：100px；
高度：100px；
}
th，td
{
背景：重复线性梯度（45度，var（--color2）25%，var（--color2）50%，var（--color1）50%，var（--color1）75%）；
}
tr：最后一个孩子td
{
底边：1px纯紫色；
}
tr:N个孩子（2）td:N个孩子（2）
{
边框：1px纯紫色；
边框底部：无；
背景：var（--color2）；
}
1.
2.
3.
4.
5.
6.
7.
8.