如何在ID定义上重用类？

Question

在下面的代码中，有没有办法在CSS声明中使用.center类而不是在每个div中执行class=？每个div应该有一个margin:0 auto。

CSS

.center {margin:0 auto;}
#first {width:400px; font-size:10px;}
#second{width:400px;text-align:center;}

HTML

<div class="center" id="first">This is the first line</div>
<div id="second">This is the first line</div>

http://jsfiddle.net/ayK3J/

Answer 1

如果您希望每个div都有margin: 0 auto;，那么请使用像

这样的简单元素选择器

div {
    margin: 0 auto;
}

如果您想将div仅限于ID，请使用元素[attr] 选择器

div[id] {
    margin: 0 auto;
}

但在使用这些之前要小心;它们太笼统了，如果你的布局变得更广泛，会导致结果不一致，所以最好在你想要应用div的{​​{1}}元素周围包含一个元素并为其分配一个ID（比如说） ，margin: 0 auto;），而不是使用像

这样的选择器

#wrapper

或者，使用

#wrapper > div {
    margin: 0 auto;
}

也应该足够......

---

不想使用包装元素？修改您的ID，如#wrapper { margin: 0 auto; } ，#center-first等，然后您可以使用元素[attr = val] 选择器，如

#center-second

以上选择器会匹配以div[id^=center-] { margin: 0 auto; } 后跟center

开头的任何IDS

Demo

Answer 2

这个怎么样？

#first,
#second {
  margin: 0 auto;
}