html - 如何复用和重写 Css 样式？

Question

好的，这是 myResource.css

.gwtCellButton button {  margin: 0;  padding: 5px 7px;  text-decoration: none;  ....more styles here...}.gwtCellButton button:active {  border: 1px inset #ccc;}.gwtCellButton button:hover {  border-color: orange;  color: orange;}

现在我想要的 .gwtCellButtonSmall 与 .gwtCellButton 完全一样，除了它有 padding: 1px 2px;

当然，如果我这样做，那么我可以复制代码:

.gwtCellButtonSmall button {  margin: 0;  padding: 1px 2px;  text-decoration: none;  ....more styles here...}.gwtCellButtonSmall button:active {  border: 1px inset #ccc;}.gwtCellButtonSmall button:hover {  border-color: orange;  color: orange;}

Answer 1

如果我对您的问题的理解正确，您希望两个元素具有相似的样式，而一个元素具有不同的 padding。

如果是这样，你可以在两个元素之间共享样式:

.gwtCellButton button, .gwtCellButtonSmall button{
    margin: 0;
    padding: 5px 7px;
    text-decoration: none;
    ...
}

然后使用!important覆盖特定元素的 padding:

.gwtCellButtonSmall button{
    padding: 1px 2px !important
}

或者你可以使用类似 Sass 的东西.