Question

我正在尝试在这里做一些桶，通常我会一次做1个类元素。这似乎很愚蠢，因为类可以共享属性。

HTML

<div id = "outerBuckets">
        <div class = "bucket1">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucket2">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucket3">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucket4">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucket5">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucket6">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div> 
    </div>

所以我想做这样的css规则：

.bucket 1 .bucket 2 . bucket 3 {
}

.bucket 4 .bucket 5 .bucket 6 {
}

基本上我想要123以相同的方式格式化...并且456以另一种方式格式化。但是当我去做一些萤火虫检查。它不起作用。所以我想这不是表达这种方式的正确方法。我正在尝试清理我的css并将其中的一些组合起来，以便它们更清洁。

有什么建议吗？

Answer 1

使用逗号分隔列表中的选择器

.bucket1, .bucket2, .bucket3 {
}

.bucket4, .bucket5, .bucket6 {
}

Answer 2

做一些像

这样的事情甚至可能有意义

<div id = "outerBuckets">
        <div class = "bucketStyleFirst">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleFirst">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleFirst">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleSecond">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleSecond">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleSecond">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div> 
</div>

这样你只需要说

.bucketStyleFirst {

}

.bucketStyleSecond {

}

当然，如果您只有两种不同的选择，那就是这样。

Answer 3

我会再试一次......（忘记发布代码的部分......）：

“例如：<div class = "someclass"> ...（注意=之前和之后的空格）

...应该是：<div class="someclass">以避免混淆浏览器。

将多个类组合成一个css规则

3 个答案: