将多个类组合成一个 css 规则
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18215636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
combined multiple classes into one css rule
提问by user2089405
I'm trying to do some buckets here and generally I would do 1 class element at a time. That seems silly since classes can share attributes.
我试图在这里做一些桶，通常我会一次做 1 个类元素。这看起来很愚蠢，因为类可以共享属性。
HTML
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>
So I wanted to do my css rules like this:
所以我想做这样的 css 规则：
.bucket 1 .bucket 2 . bucket 3 {
}
.bucket 4 .bucket 5 .bucket 6 {
}
Basically I wanted 123 to be formatted the same way...and 456 to be formatted another way. But when I went to do some checking in firebug. It wasn't working. So I guess this isn't correct way to express this. I'm trying to clean up my css a little and combined down some of these things so they are cleaner.
基本上我希望 123 以相同的方式格式化……而 456 以另一种方式格式化。但是当我去检查萤火虫时。它不起作用。所以我想这不是表达这一点的正确方式。我正在尝试稍微清理我的 css 并合并其中的一些东西，以便它们更干净。
Any suggestions?
有什么建议？
回答by
Use commas to separate the selectors in a list
使用逗号分隔列表中的选择器
.bucket1, .bucket2, .bucket3 {
}
.bucket4, .bucket5, .bucket6 {
}
回答by Chris
It may even make sense to do something like
做类似的事情甚至可能有意义
<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>
That way you'll only need to say
这样你只需要说
.bucketStyleFirst {
}
.bucketStyleSecond {
}
This is of course if you'll only be having the two different options.
这当然是如果您只有两种不同的选择。
回答by Dennis Munding
I will try again... (forget the part about posting code...):
我会再试一次......（忘记关于发布代码的部分......）：
"E.g.: <div class = "someclass">... (notice the whitespace before and after =)
“例如：<div class = "someclass">...（注意 = 前后的空格）
...should be: <div class="someclass">to avoid confusing the browsers.
...应该是：<div class="someclass">避免混淆浏览器。
