css - 在 1 行中将 css 应用于我的桌子的头部和身体

Question

使用以下 css，我定义了表头的第一列

table.search-transport tr th:nth-child(1) { width: 30px; text-align:right; }

我想不仅将这个 css 应用在头部，而且还应用在桌子的主体上。

我知道我们可以分两行进行：

table.search-transport tr th:nth-child(1),
table.search-transport tr td:nth-child(1)
                  { width: 30px; text-align:right; }

但我想知道我们是否可以在 1 标志线中进行？就像是：

table.search-transport tr th:nth-child(1) + td:nth-child(1) { width: 30px; text-align:right; }

谢谢。

Answer 1

只要它是第一列中的任何单元格？您应该能够完全省略th/td部分，以及使用子选择器，因为 atr只能有 ath或 atd作为子元素（并且您要确保只选择它的子元素而不选择任何内部元素） ：

table.search-transport tr > :nth-child(1) { width: 30px; text-align: right; }

（如果您想支持旧版浏览器，请替换:nth-child(1)为:first-child.）

但是，一般来说，您不能同时选择两者th:nth-child(1)并td:nth-child(1)单独选择，同时避免重复选择器的其余部分。这已经在网站的其他地方被覆盖到死，但请参阅此处了解更多信息。

Answer 2

您当前使用的 CSS 选择器在性能方面很差。

以下行回答您的问题。

.search-transport tr > :nth-child(1) { width: 30px; text-align: right; }

检查小提琴以查看操作中的选择器http://jsfiddle.net/LNJLf/

Answer 3

我猜你正在寻找:any伪类。请参阅https://developer.mozilla.org/en-US/docs/CSS/:any。

table.search-transport tr :any(th,td):nth-child(1) { width: 30px; text-align:right; }

注意：您需要为此添加供应商前缀。未经测试。