Html css子代选择器附加样式子元素除外

我有两张桌子。当我应用第一个div的

css

class表时，就会影响第二个div表

.tbl通用th:n子级（-n+2），td:n子级（-n+2）{
背景色：红色；
宽度：25px；
} 
.tbl通用th:n最后一个子（-n+3），td:n最后一个子（-n+3）{
背景色：红色；
宽度：25px；
}

测试1
测试2
测试3
测试4
测试5
测试6
测试7
A.
B
C
D
E
F
G

这是因为您的CSS：

.tbl-generic th:nth-child(-n+2),td:nth-child(-n+2) { 

    background-color:red;
    width:25px;
} 

.tbl-generic th:nth-last-child(-n+3),td:nth-last-child(-n+3) { 

    background-color:red;
    width:25px;
}

这应该是：

.tbl-generic th:nth-child(-n+2),
.tbl-generic td:nth-child(-n+2) { 

    background-color:red;
    width:25px;
} 

.tbl-generic th:nth-last-child(-n+3),
.tbl-generic td:nth-last-child(-n+3) { 

    background-color:red;
    width:25px;
}

否则，所有

td的

都将获得样式

---

更新了您的您正在将css应用于所有

td

而不是第一个div，这就是问题所在 检查一下

.tbl-generic-th:n子级（-n+2），.tbl-generic-td:n子级（-n+2）{
背景色：红色；
宽度：25px；
} 
.tbl generic th:n最后一个子（-n+3），.tbl generic td:n最后一个子（-n+3）{
背景色：红色；
宽度：25px；
}

测试1
测试2
测试3
测试4
测试5
测试6
测试7
A.
B
C
D
E
F
G

您忘记了css中的

.tbl generic

.tbl-generic-th:n子级（-n+2），.tbl-generic-td:n子级（-n+2）{
背景色：红色；
宽度：25px；
} 
.tbl generic th:n最后一个子（-n+3），.tbl generic td:n最后一个子（-n+3）{
背景色：红色；
宽度：25px；
}

测试1
测试2
测试3
测试4
测试5
测试6
测试7
A.
B
C
D
E
F
G

试试这个

div:first-of-type .tbl-generic{

}

---

因为您还在任何表中的

td

上设置了样式

td:n个子项（-n+2）

和

td:n个最后一个子项（-n+3）

Ohh耶！。这很简单