结合CSS后代和类选择器

Question

是否有一种方便的方法可以将后代选择器组合成一个不会使空间混乱的类？

例如，我有两条规则：

.details-recommendations-table th:nth-child(1) { /*rule*/ }
.details-recommendations-table td:nth-child(1) { /*rule*/ }

由于规则相同，并且描述了类中的一些td和th元素，因此将它们组合成一个是很方便的。目前，我有

.details-recommendations-table th:nth-child(1), .details-recommendations-table td:nth-child(1) { /*rule*/ }

但是这会通过重复父类的名称来混淆空间。有没有一种巧妙的方法来结合这些规则，这些都是：

.details-recommendations-table th:nth-child(1), td:nth-child(1) { /*rule*/ }

以上内容不起作用，因为td:nth-child(1)部分传播到其他表格，即它不仅适用于td类中的.details-recommendations-table元素，意。

Answer 1

假设您的td和th元素有效地放置在tr元素中，您只需将选择器压缩为：

.details-recommendations-table tr :nth-child(1) { /*rule*/ }

但是，如果您想要拉出每种类型的第一种（无论他们是哪一个孩子），您都可以使用：

.details-recommendations-table tr :nth-of-type(1) { /*rule*/ }

JSFiddle demo

在这两种情况下，这都假定您的td和th元素没有子元素。如果他们确实有孩子，您应该引入child combinator（>）：

.details-recommendations-table tr > :nth-of-type(1) { /*rule*/ }

Answer 2

根据BoltClock's a Unicorn：

留下的评论，我现在已经测试并修复了它

.details-recommendations-table :not(tr):not(tbody):nth-child(1) { /* rule */ }

演示：http://jsfiddle.net/Ym9Va/

Answer 3

这将选择tr：

正下方的任何第一个孩子

.details-recommendations-table tr>*:nth-child(1) { /*rule*/ }