有没有办法为同一个父级分组第 n 个子级 CSS 规则答案

【问题标题】：Is there a way to group nth-child CSS rules for same parent有没有办法为同一个父级分组第 n 个子级 CSS 规则
【发布时间】：2015-06-05 23:35:01
【问题描述】：

我有以下 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 预处理器。

【问题讨论】：

标签： css css-selectors

【解决方案1】：

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

【讨论】：

谢谢，我是这么想的，但我希望也许有一些新的语法或结构可用，所以让我们看看是否会有一些建议。
第 n 个子部分除外。它还取决于您的 HTML。如果中间没有 div。我会从 .wrap 擦除到 .level1，
那是另一个“方向”，我只是好奇第n个子部分是否可以以某种方式分组。

【解决方案2】：

表达式:nth-child(n+12) 匹配以:nth-child(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(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)) 比:nth-child(n+b) 对于任何非零b 更便宜或更贵。这些中的每一个本身都是一个非常复杂的操作。

【讨论】：

感谢您的回答。在这种特殊情况下，我真的需要第 9 个元素以及在第 11 个元素之后（包括第 11 个元素）的所有元素。这个附加的 :not 语句使得这里的压缩规则成为可能。但是，我正在寻找一个通用的分组规则，该规则也适用于子元素的任意子集，这些子元素不能简单地由 (an+b) 选择。但是对于 :nth-child 和 :not 的组合 +1。
@AndyZ: 是的 - 组合任意选择器是不可能的，直到浏览器实现 Selectors 4 中的新 :matches() 伪类，这将允许您编写类似 div:matches(:nth-child(9), :nth-child(11)) 的东西。

【解决方案3】：

你可以做这样的事情，它不会更短而且在技术上是多余的。

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

【讨论】：

那选择性较低，将匹配#div 内的任何div，不需要中间类元素选择器。
谢谢，但在我的情况下，我必须使用精确的选择链，因为它是一个多行、多列、自定义大小的元素菜单，我只需要给几个 div 一个特定的宽度，但是div 没有 id 和唯一的类，所以我只能通过这个链接的 css 选择器来引用它们。