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

Question

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

附图将进一步解释。我在 WordPress 中使用了一个表格插件，所以我无法添加 JavaScript 或id单个列。

Answer 1

CSS 有一个first-child应该为您工作的伪元素。 这是一篇与之相关的文章。你的 CSS 最终应该是这样的：

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

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

Answer 2

尝试这个：

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

这里*用来代替theadand 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。