有没有一种方法可以为同一个父元素分组使用nth-child CSS规则？

Question

我有以下CSS规则：

 #div .item62 > .wrap > .cont > .level1 > div:nth-child(9),
 #div .item62 > .wrap > .cont > .level1 > div:nth-child(11),
 #div .item62 > .wrap > .cont > .level1 > div:nth-child(n+12){
    width: 140px ;
 }

我希望将这些规则分组以使代码更短，可能还可以在选择父元素时使代码更有效率（这些规则是否会让浏览器引擎搜索三次相同的“父”元素，或者已经进行了优化？）。

有没有一种更简洁的方式来编写这些规则？

由于代码结构是由第三方代码创建的，我无法添加不同的类或更改HTML结构。

我找不到一种CSS方法，可以选择具有多个不同子元素的一个父元素，而不必重写到子元素的整个路径。另外，我没有可用的额外CSS预处理器。

- AndyZ

Answer 1

您当前的CSS规则是在没有任何预处理器的情况下，可以编写的最短的规则。

- m4n0

---

谢谢，这正是我所想的，但我希望可能有一些新的语法或结构可用，所以让我们看看是否会有一些建议。 - AndyZ

除了 nth-child 部分以外。它还依赖于您的 HTML。如果中间没有 divs，我将擦除从 .wrap 到 .level1 的部分。 - m4n0

这是另一个“方向”，我只是好奇nth-child部分是否可以以某种方式分组。 - AndyZ

Answer 2

表达式:nth-child(n+12)匹配从:nth-child(12)开始的每个子元素。假设11和n+12不是打字错误，您可以将它们简化为单个n+11表达式：

#div .item62 > .wrap > .cont > .level1 > div:nth-child(9),
#div .item62 > .wrap > .cont > .level1 > div:nth-child(n+11)

注意，现在:nth-child(9), :nth-child(n+11)基本上等同于:nth-child(n+9)，即从:nth-child(9)开始包括其本身和后续所有元素，但不包括:nth-child(10)。

有了这个想法，你可以使用:not(:nth-child(10))来重写上面的选择器列表：

#div .item62 > .wrap > .cont > .level1 > div:nth-child(n+9):not(:nth-child(10))

现在你有一个带否定的复杂选择器。我无法评论将否定加入混合中的性能影响，但是除非分析表明该选择器会导致显着的性能问题，否则我认为为了将选择器列表减少一半以上的字节，这绝对是值得的。就个人而言，我无法想象：not（：nth-child（10））比任何非零b的：nth-child（n+b）更便宜或更昂贵。每个选择器本身都是相当复杂的操作。

- BoltClock

---

感谢您的回答。在这种特殊情况下，我确实需要第9个元素和第11个元素及其后面的所有元素。这个额外的:not语句使得压缩规则成为可能。然而，我正在寻找一个通用的分组规则，它也适用于子元素的任意子集，这些子集不能简单地通过（an+b）进行选择。但是，对于:nth-child和:not的组合给予了加1的评价。 - AndyZ

@AndyZ：这是真的 - 直到浏览器实现新的“：matches（）”伪类，才能组合任意选择器，它将允许您编写类似于“div:matches(:nth-child(9), :nth-child(11))”这样的代码。 - BoltClock

Answer 3

你可以像这样做，虽然不会更短，但在技术上是多余的。

#div > .item62 > .wrap > .cont > .level1 > div:nth-child(2n+9),
#div > .item62 > .wrap > .cont > .level1 > div:nth-child(n+12)
{
  width:140px;
}

- David Calvin

---

这样做的选择性较低，将匹配#div内的任何div，而不需要中间的类元素选择器。 - recursive

谢谢，但在我的情况下，我必须使用确切的选择链，因为它是一个多行，多列，自定义大小的元素菜单，并且我只需要为一些 div 元素指定特定的宽度，但这些 div 元素没有 ID 和唯一的类，所以我只能通过这个链式 CSS 选择器来引用它们。 - AndyZ