定位id和类

Question

我有两个单独的HTML页面：

<!-- in the body of page1.html -->
<div class="foo">
    <!-- content goes here -->
</div>

和

<!-- in the body of page2.html -->
<div id="bar">
    <!-- some other content goes here -->
</div>

目前，我使用一些常见的CSS来定位这些div元素：

.foo {
    width: 680px !important;
}
#bar {
    margin: auto;
    width: 680px !important;
}

是否有更短的时间（DRY - 不要自己重复）这样做？

Answer 1

您可以尝试这种方式：

.foo, #bar {
  width: 680px !important;
}

Answer 2

这可能是“六个一半，六个其他”场景中的一个，但你在寻找这个吗？：

.foo, #bar {
    width: 680px !important;
}
#bar {
    margin: auto;
}

您可以在一个CSS块上放置您喜欢的所有选择器，用逗号分隔。

Answer 3

将.foo课程添加到HTML中的#bar：

<div id="bar" class="foo">
    <!-- some other content goes here -->
</div>

从CSS中的width移除#bar：

.foo {
    width: 680px !important;
}
#bar {
    margin: auto;
}

Answer 4

这对你有帮助，

<强> CSS

.foo, #bar {
  width: 680px !important;
}

<强> HTML

<div class="foo">
    <!-- content goes here -->
</div>

<div id="bar">
    <!-- some other content goes here -->
</div>

要对选择器进行分组，请用逗号分隔每个选择器。