如何在ID定义上重用类？

Question

在下面的代码中,有没有办法.center在CSS声明中使用该类而不是class=在每个div中执行一个？每个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你想要应用的这些元素周围包含一个元素margin: 0 auto;,然后为它分配一个ID(比方说#wrapper),然后使用像这样的选择器

#wrapper > div {
    margin: 0 auto;
}

或者,使用

#wrapper {
    margin: 0 auto;
}

应该还够......

不想使用包装元素？修改您的ID #center-first,#center-second等等,然后您可以使用元素[attr = val]选择器

div[id^=center-] {
    margin: 0 auto;
}

上面的选择器匹配任何以单词center后跟a 开头的IDS-

Demo