如何重用和覆盖 Css 样式？答案

【问题标题】：How to reuse and override Css style?如何重用和覆盖 Css 样式？
【发布时间】：2014-03-07 04:20:01
【问题描述】：

好的，这是 myResource.css

.gwtCellButton 按钮 { 边距：0；填充：5px 7px；文字装饰：无； ....更多款式在这里... } .gwtCellButton 按钮：活动 { 边框：1px inset #ccc; } .gwtCellButton 按钮：悬停 { 边框颜色：橙色；颜色为橙色; }

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

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

.gwtCellButton小按钮{ 边距：0；填充：1px 2px；文字装饰：无； ....更多款式在这里... } .gwtCellButton小按钮：活动{ 边框：1px inset #ccc; } .gwtCellButton小按钮：悬停{ 边框颜色：橙色；颜色为橙色; }

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

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

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

或者你可以使用Sass之类的东西。

【讨论】：

如果您确保将更具体的选择器放在更通用的选择器下方，则无需使用“！important”。

【解决方案2】：

您不需要复制任何代码，或者更糟糕的是，使用!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 声明可能会导致specificity issues 下线。

【讨论】：

【解决方案3】：

使用!important。如果有任何其他属性，则具有!important 的属性将覆盖完全属性。

所以你的情况，

 padding: 1px 2px!important;

大量使用它们有时会给您带来一些问题。因此，也不要忘记快速查看this summary。

【讨论】：

如果您确保将更具体的选择器放在更通用的选择器下方，则无需使用“！important”。