组合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) 部分会传播到其他表格，即它不仅仅适用于 .details-recommendations-table 类中的 td 元素，这并不是预期的结果。

- Wojtek

Answer 1

假设您的和元素是有效放置在元素中的，您可以将选择器简化为：

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

如果你想要获取每个类型的第一个元素（无论它们是第几个子元素），可以使用以下代码：

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

JSFiddle演示。

在这两种情况下，假设您的 td 和 th 元素没有子元素。如果它们有子元素，则应该引入一个子级组合器（>）：

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

- James Donnelly

---

这适用于后代的特定情况，并回答了我的问题。是否有一种通用的方法将不同的规则组合在一起？即两个不同的元素，例如.details-recommendations-table span，.details-recommendations-table div，转换为类似.details-recommendations-table <<span，div>>的东西，其中<< >>表示某种分组？编写.details-recommendations-table span，div将使该规则适用于所有divs...我想要一种简洁的方法来清理样式表。而不使用less.js来嵌套事物。 - Wojtek

Answer 2

我现在已经测试并修复了它，根据BoltClock's a Unicorn留下的评论：

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

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

- emerson.marini

---

如果有tbody（通常都会有），那么这将匹配tbody。 - BoltClock

Answer 3

这将选择在 tr 直接下方的任何第一个子元素：

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

- jazZRo