Question

如何编写较短的css代码选择子？例如：
Q1。如果我尝试在.l1

中选择.l3 .a

我需要写.a 2次，如果我必须选择4个孩子div我需要写4次.... css中的任何其他语法？

.a .l1, .a .l3{
}


<div class="a">
    <div class="l1">
    </div>
    <div class="l2">
    </div>
    <div class="l3">
    </div>
    <div class="l4">
    </div>
    ....
</div>

Answer 1

如果您想选择所有div，那么您可以使用：

.a div{

}

如果这些div包含其他div，那么你最好使用子选择器来避免它们继承父样式：

.a + div{

 }

如果您选择的只是一个（比如第3个），那么您可以使用：

.a div:not(:nth-child(3)){

}

：仅在IE9 +中支持nth-child，因此这取决于您要支持的浏览器。

Answer 2

我建议，在这种情况下：

.a div:nth-child(odd) {
    /* first, third, etc */
}

Answer 3

CSS在这种情况下可能很冗长。通常会有很多重复，而且你可以做的不多。

在这种情况下重复选择器的.a部分几乎不是最坏的情况;它实际上相对简短明了。我不担心。

如果您仍然担心，我可以提供一些选项：

nth-child()
此选择器允许您基于常规模式选择组内的元素。例如，.a nth-child(2n-1)将从第一个元素开始选择每个第二个元素，因此l1和l3符合您在问题中的要求。

然而，你的例子相当小;目前尚不清楚这是否能够满足您在前几场比赛之后的要求。 nth-child实际上只对常规模式有用;如果你需要在列表中选择随机的任意元素，它可能不合适。即使它是合适的，像IE8这样的旧浏览器也不支持它（这可以通过javascript polyfill来解决，例如Selectivizr）。
使用像SASS or Less这样的CSS预处理器 SASS和Less都为你的CSS代码提供了一个全新的语法，它允许巧妙的东西，如嵌套相关的样式，变量等。在你的情况下，这将允许你编写这样的代码：
```
.a {
    .l1, .l3 {
        /* styles go here */
    }
}
```
这可能正是您正在寻找的东西？

这里的缺点是不是CSS 。它需要由SASS或Less处理器处理，并在浏览器理解之前转换为CSS。这通常是作为站点部署的一部分完成的。

如何编写较短的css代码选择孩子？

3 个答案: