css - 避免重复 CSS 样式？

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>