Question

使用以下css我定义表格的第一个col

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 signe线？类似的东西：

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

感谢。

Answer 1

只要它是第一列中的任何单元格？您应该可以简单地省略th / td部分，以及使用子选择器，因为tr只能有th或者td 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)和{{1}}，同时避免重复选择器的其余部分。这已经在网站的其他地方已经被处死，但请参阅here了解一些额外信息。

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; }

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

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

3 个答案: