Question

我正在使用Html和JQuery。我在styles.css中有以下CSS样式。

#someTable{
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:1px solid;
    width:80%;
    height:98px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color:mintcream;
}

和

#anotherTable{
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:1px solid;
    width:80%;
    height:98px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color:white;
}

在上面的css样式中，除了background-color之外，所有样式都是相同的，所有样式都是重复的。如何避免重复并扩展firstTable？

的属性

Answer 1

您可以使用课程。它看起来像这样：

<强> CSS：

.masterclass{ here you put all the properties that are the same } 

#table1 { here the specific details , your color in this case }
#table2 { here the specific details , your color in this case }

html：

<table class='masterclass' id='table1'> </table>
<table class='masterclass' id='table2'> </table>

Answer 2

您可以将它们组合在一起，并重新定义例外情况：

#someTable, #anotherTable{
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:1px solid;
    width:80%;
    height:98px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color:mintcream;
}

#anotherTable{
    background-color:white; /* Set the exception */
}

我假设你不能设定table的风格。您可以从组中删除背景颜色，并使其成为一个自己的集合，如#anotherTable，但这将为您节省4行:)

您可以为两个表提供一个类，并将其用作＆＃39;组＆＃39;选择器，但ID比类快。在这种情况下， IMO ，您应该坚持使用ID。

Answer 3

我绝对会使用课程来实现你想要的。以下使用BEM：

.Table {
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:1px solid;
    width:80%;
    height:98px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
}

.Table--primary {
    background-color: white;
}

.Table--secondary {
    background-color: mintcream;
}

然后在你的HTML中：

<table class="Table">...</table>

<table class="Table Table--primary">...</table>

<table class="Table Table--secondary">...</table>

避免重复CSS样式？

3 个答案: