如何重用和覆盖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之类的东西。

Answer 2

使用!important 。 如果有其他属性，则具有!important的属性将覆盖确切的属性。

所以你的情况

 padding: 1px 2px!important;

大量使用它们有时会给您带来一些问题。 因此，也不要忘记快速浏览一下本摘要 。

Answer 3

您不需要复制任何代码，或更糟的是，使用!important 。

通过在每个HTML元素上指定两个类可以通过使用修饰符类来解决此问题：基础gwtCellButton类和修饰符类（在此示例中为regular和small ）。

.gwtCellButton button {
  margin: 0;
  text-decoration: none;
}

.gwtCellButton.regular button {
  padding: 5px 7px;
}

.gwtCellButton.small button {
  padding: 1px 2px;
}

不必要地使用!important声明可能会导致特定性问题 。