Html table类的第一个子类

我只想对具有特定类的表的第一个TD应用一些样式。 我正在使用：

.class td:first-child {
    background-color: red;
}

但是如果有嵌套的TD，它们也会被样式化

如何仅将此应用于第一个TD

---

（我希望test1变成红色，但不是test4）

除非您想使用类或其他东西，否则可以使用直接子选择器：

.pretty > tbody > tr > td:first-child {
    background-color: red;
}

您可以使用，

.pretty > tbody > tr > td:first-child {
  background-color: red;
}

.pretty>tbody>tr>td：第一个孩子{
背景色：红色；
}

时间
从…起
到
有效载荷
测试1
测试2
测试3
测试4
测试5

子选择器应与添加的

tr:first Child

一起工作，以便您只选择第一行

.pretty>tbody>tr:first child>td:first child{
背景色：红色；
}

时间
从…起
到
有效载荷
测试1
测试2
测试3
测试4
测试5
测试1
测试2
测试3
测试4
测试5
测试1
测试2
测试3
测试4
测试5

这应该可以做到：

.pretty>*>tr>td：第一个孩子{
背景色：红色；
}

时间
从…起
到
有效载荷
测试1
测试2
测试3
测试4
测试5
测试1
测试2
测试3
测试4
测试5
测试1
测试2
测试3
测试4
测试5

你不想使用类？嗯，我不想：-）（如果可能的话）

.class>tr:first child>td:first child

应该可以工作。这可能是有关css选择器如何工作的有用信息。你知道如何在SASS中做到这一点吗？非常感谢。。！这对我来说是一件新鲜事。你知道如何在SASS中实现这一点吗？我添加了更多的表行，这样你就可以看到在行上使用

：first child

伪选择器的结果。太棒了。你知道如何在SASS中实现这一点吗？除非你需要单独设置这些元素的样式，否则我认为你在SASS中不需要做任何不同的事情。你知道如何在SASS中实现这一点吗？@MaRco85，尽管在这种情况下在纯CSS中看起来更好。太棒了。它实际上在普通CSS中看起来更好：-D谢谢你这么说much@MaRco85：如果要将您的选择仅限于作为tbody一部分的

td

元素，请将

*

替换为

tbody

。如果希望代码也应用于

th

元素，只需将

td

替换为

th

。等