Question

css文件中有两个相同的css选择器。

div.left  {
    margin:0 auto;
    float:left;
    width:300px;
    height:200px;
    border:2px solid black; }
div.right  {
    margin:0 auto;
    float:left;
    width:300px;
    height:200px;
    border:2px solid black; }

我发现div.left div.right无法组合成一个css选择器。

div.left  div.right{
    margin:0 auto;
    float:left;
    width:300px;
    height:200px;
    border:2px solid black; }

如何在我的情况下简化css文件？

Answer 1

只需用逗号分隔选择器，如下所示：

div.left,
div.right {
    margin:0 auto;
    float:left;
    width:300px;
    height:200px;
    border:2px solid black;
}

现在样式将适用于两个选择器

Answer 2

问题：

你的第一个建议

div.left  div.right{
    margin:0 auto;
    float:left;
    width:300px;
    height:200px;
    border:2px solid black; 
}

实际匹配html代码：

<div class="left">
    .
    .
    .
    <div class="right>Stuff here</div>
    .
    .
    .
</div>

该样式仅适用于上面的class="right" div。这是因为CSS中选择器之间的空格表示它仅适用于类right的div元素，它们包含在类left的父div中。

解决方案：

相反，您希望使用逗号来指示共享相同样式的无关选择器列表，如下所示：

div.left, div.right{
    margin:0 auto;
    float:left;
    width:300px;
    height:200px;
    border:2px solid black; 
}

现在匹配以下html代码，其中div与另一个无关，可以放在文档中的任何位置：

<div class="left">Stuff here</div>
.
.
.
<div class="right">Stuff here</div>

Answer 3

只需在它们之间使用逗号即可。

如何将两个相同的css选择器合二为一？

3 个答案: