如何自定义HTML中每列的第一行？

Question

我想自定义每列的第一行。我尝试了很多HTML和CSS技巧，但它不适用于我。

附图将进一步解释。我在WordPress中使用表插件，因此我无法将JavaScript或id添加到一个列中。

Answer 1

CSS有一个first-child伪元素，应该适合你。 Here is an article abut it.你的CSS应该是这样的：

table.mytableid > tbody > tr > td:first-child {
    background: blue;
    color: white;
}

>用于必须是直接子女的元素。

Answer 2

试试这个：

table > * > tr > td:first-child{
    /* css styles */
}

此处使用*代替thead和tbody。

但有时使用*对性能来说代价很高..所以，如果你关心性能，那就去吧：

table > thead > tr > td:first-child, table > tbody > tr > td:first-child{
     /* css styles */
}

或者

我想在这里分享一个不需要:first-child

的技巧

table > thead > tr > td + td, table > tbody > tr > td{
    /* normal styles */
}

table > thead > tr > td, table > tbody > tr > td{
    /* first-child styles */
}

上述技巧每次都适合我，因为第一个孩子不是任何其他td元素的兄弟姐妹:)。我的意思是第一个子元素上面没有其他元素。但我更喜欢使用:first-child。