有没有办法为同一父

组第n个孩子的CSS规则，我有以下的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预处理器可用。

来源

2015-05-18 AndyZ

您当前的CSS规则是最短的，您可以编写而不需要任何预处理器可用。

来源

2015-05-18 17:42:40

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

除了第n个孩子的部分。它也依赖于你的HTML。如果中间没有div。我会从.wrap擦除到.level1， –

这是另一个“方向”，我只是好奇，如果第n孩子部分可以以某种方式分组。 – AndyZ

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

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

来源

2015-05-18 20:36:07

这种选择性较差，会匹配'＃div'中的任何'div'，不需要中间类元素选择器。 – recursive

谢谢，但在我的情况下，我不得不使用确切的选择链，因为它是一个多行，多列，自定义大小的元素菜单，我只需要给几个div一个特定的宽度，但divs没有id和no独特的类，所以我只能通过这个链式CSS选择器来引用它们。 – AndyZ

表达: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))

现在你有一个否定一个复杂的选择。我不能评论组合中否定的性能影响，但除非分析显示此选择器会导致重大性能问题，否则我会说为了将选择器列表减少一半以上的字节，这绝对是值得的。就个人而言，对于任何非零值b，我无法想象:not(:nth-child(10))比:nth-child(n+b)便宜得多或者贵得多。其中每一个都是非常复杂的操作。

来源

2015-05-19 10:22:25 BoltClock

谢谢你的回答。在这种特殊情况下，我真的需要第11个元素之后的第9个和所有元素。这个额外的：不声明使得浓缩的规则成为可能。但是，我正在寻找一种通用分组规则，该规则也适用于子元素的任意子集，这些子元素不能简单地由（an + b）选择。但是，对于以下组合的+1：孩子和：不是。 – AndyZ

@AndyZ：这是真的 - 只有在浏览器从选择器4实现新的'：matches（）'伪类时，才能组合任意选择器，这将允许您编写诸如'div：matches（：nth-child （9），：第n个孩子（11））。 – BoltClock

谢谢，所以至少迟早会来的 – AndyZ

有没有办法为同一父

回答

相关问题