用于 html 表格元素特定列中所有数据行的 CSS 选择器

Question

我想在表格列的标题 (th) 中添加一个 CSS 类名称“currency”，并让列中的所有子数据单元格 (td) 右对齐。

我最好的尝试是:

table th.currency td {
    text-align: right;
}

但是这显然行不通。我试图让它成为直系后代“>”，但这也没有用。

我想避免将单独的“货币”类名称添加到所有 td 单元格中。有人有解决方案吗？

Answer 1

如果您知道列号，您可以在表中的所有 trs 上使用第 n 个子项的 css 选择器。

table tr td:nth-child(n /*this is the column number*/)
{
    text-align: right;
}

这是一个jsfiddle

编辑:您还可以为表提供唯一 ID 并以这种方式定位它们:

#table1 tr td:nth-child(3 /*this is the column number*/)
{
    text-align: right;
}
#table2 tr td:nth-child(2 /*this is the column number*/)
{
    text-align: right;
}
#table3 tr td:nth-child(5 /*this is the column number*/)
{
    text-align: right;
}