-1

如何编写更短的 CSS 代码选择子项？
示例：
Q1。如果我尝试.l1 .l3选择.a

我需要写.a2 次，如果我必须选择 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>
4

3 回答 3

0

如果要选择所有 div，则可以使用：

.a div{

}

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

.a + div{

 }

如果您选择除一个以外的所有选项（比如第三个），那么您可以使用：

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

}

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

于 2013-06-07T09:54:18.013 回答
0

在这种情况下，我建议：

.a div:nth-child(odd) {
    /* first, third, etc */
}
于 2013-06-07T10:02:34.260 回答
0

在这种情况下，CSS 可能很冗长。很多时候有很多重复，而你对此无能为力。

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

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

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

    但是，您的示例很小；除了前几场比赛之外，目前尚不清楚这是否能很好地满足您的要求。nth-child真的只对常规模式有用；如果您需要在列表中随机选择任意元素，它可能不适合。即使它是合适的，像 IE8 这样的旧浏览器也不支持它（这可以通过像Selectivizr这样的 javascript polyfills 来解决）。

  • 使用 CSS 预处理器，如SASS 或 Less。
    SASS 和 Less 都为您的 CSS 代码提供了一种全新的语法，它允许巧妙的事情，例如嵌套相关样式、变量等。在您的情况下，这将允许您编写如下代码：

    .a {
    .l1, .l3 {
        /* styles go here */
    }
}

    这可能正是您正在寻找的？

    这里的缺点是它不是 CSS。它需要经过SASS或Less处理器处理并转化为CSS，浏览器才能理解它。这通常作为站点部署的一部分来完成。

于 2013-06-07T11:11:58.347 回答