Question

我为许多看起来相似的div设置了样式。唯一的区别是每个div都有不同的填充和边距设置。像这样：

<div class="mainStyle" id="cc">CC</div>
<div class="mainStyle" id="bb">BB</div>
<div class="mainStyle" id="aa">AA/div>

并且：

.mainStyle {
    float: right;
    width: 60px;
    text-align : center;
    font: 95% Arial;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background : #69abd0;
}

并且每个id只有：

#aa {
    margin: 0px 2px 0px 2px;
    padding: 2px 0 5px 0;
}

#bb {
    margin: 10px 2px 10px 2px;
    padding: 2px 0 5px 0;
}

#cc{
    margin: 10px 2px 10px 2px;
    padding: 20px 0 50px 0;
}

我知道这是错误的语法，但我不知道怎么回答这个问题...... 我不希望每个元素id都有一个长样式定义，因为除了填充和边距之外，它们的％90是相同的。我想以某种方式结合类的风格和元素。

我该怎么做？

Answer 1

我不明白你的问题。您可以将ID与课程完美地结合在一起。您在寻找重用这些ID的方法吗？你可以将它们转换为类，并在html中使用它：

<div class="mainStyle aa">AA/div>

您的代码确实没有问题。

Answer 2

该语法没有任何问题，但您可以减少重复性。 id比类更具体，因此您只需覆盖类样式中的设置：

.mainStyle {
    float: right;
    width: 60px;
    text-align : center;
    font: 95% Arial;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background : #69abd0;
    margin: 10px 2px;
    padding: 2px 0 5px 0;
}

#aa {
    margin: 0 2px;
}

#bb {
}

#cc{
    padding: 20px 0 50px 0;
}

如果您不想在元素上使用该类，则可以使用,运算符为样式使用多个选择器。样式规则按照它们的编写顺序应用，因此具有相同特异性的后续规则将覆盖以前的规则：

#aa,#bb,#cc {
    float: right;
    width: 60px;
    text-align : center;
    font: 95% Arial;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background : #69abd0;
    margin: 10px 2px;
    padding: 2px 0 5px 0;
}

#aa {
    margin: 0 2px;
}

#bb {
}

#cc{
    padding: 20px 0 50px 0;
}

（仅包含空#bb规则以表明我没有忘记它。因为它是空的，当然不需要。）

Answer 3

我不确定我是否完全理解你的问题。您可以“使用”类.mainstyle#aa来定位CSS中的html ID，但这完全有点过分。真的没有太多简化：

.mainStyle {
    float: right;
    width: 60px;
    margin: 10px 2px 10px 2px;
    padding: 2px 0 5px 0;
    text-align : center;
    font: 95% Arial;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background : #69abd0; }    
#aa { margin: 0px 2px 0px 2px; }
#cc { padding: 20px 0 50px 0; }

做一些类似的事情也是更好的做法：

<div class="main">
    <div id="cc">CC</div>
    <div id="bb">BB</div>
    <div id="aa">AA</div>
</div>

和

/* Use the child selector... */
.main > div { /* apply .mainStyle here */ }
#aa...

Answer 4

你所写的内容将完成你所要求的。您的代码中确实存在语法错误，最终AA元素的标记缺少左侧＆lt;。另外，请记住，在CSS样式方面，顺序很重要。 id的样式需要在.mainStyle和任何其他可能覆盖边距或填充的样式之后。您可以通过在样式上使用！important修饰符来克服这种必要性。

Answer 5

喜欢这个..这是级联样式表的级联部分，如果你需要的话，不要两次写同样的东西并且稍后过了它。之后设置的CSS设置将提前超过一组。你也应该研究有关css的特异性。

<强> CSS

.mainStyle {
    float: right;
    width: 60px;
    text-align : center;
    font: 95% Arial;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background : #69abd0;
    margin: 10px 2px 10px 2px;
    padding: 2px 0 5px 0;
}

#aa {
    margin: 0px 2px 0px 2px;
}

#cc{
    padding: 20px 0 50px 0;
}

CSS继承风格

5 个答案: