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预处理器可用。

Answer 1

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

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))。< / p>

考虑到这一点，您可以使用#div .item62 > .wrap > .cont > .level1 > div:nth-child(n+9):not(:nth-child(10))重写上述选择器列表：

:not(:nth-child(10))

现在你有一个带有否定的复杂选择器。我无法评论在混合中使用否定的性能影响，但是除非分析显示此选择器会导致显着的性能问题，我要说的是，为了将选择器列表减少一半以上的字节，它会使用#c;绝对值得。就个人而言，对于任何非零:nth-child(n+b)，我都无法想象b比<?php $html = '<enclosure url="http://i.dailymail.co.uk/i/pix/2015/05/19/10/28D9A90800000578-0-image-m-14_1432029086109.jpg" type="image/jpeg" length="13451"/>'; $dom = new DOMDocument; $dom->loadHTML($html); $img = $dom->getElementsByTagName('enclosure')->item(0); echo $img->attributes->getNamedItem("url")->value; ?>更便宜或更昂贵。这些都是一个相当复杂的操作。

Answer 3

你可以做这样的事情，它不会短得多，技术上也是多余的。

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

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

3 个答案: