如何重用和覆蓋Css風格？

好吧，這裏是myResource.css如何重用和覆蓋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;

Ofcourse，如果我不喜歡這一點，那麼我可以複製代碼：

 
.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; 
}

來源

2014-02-10 Tum

如果我正確理解您的問題，您希望有兩個具有相似樣式的元素，其中一個具有不同的padding。

是這樣，你可以在兩個元素之間共享樣式：

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

然後使用!important覆蓋padding爲特定的元素：

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

或者你可以使用類似Sass。

來源

2014-02-10 00:15:09 Charlie

它的工作很好非常感謝你 – Tum

如果你確保你把更具體的選擇器放在更普通的選擇器下面，那麼不需要使用「！important」。 –

@JohnSlegers好吧 – Charlie

使用!important。具有!important的財產如果有其他財產，則覆蓋該財產。

所以你的情況，

padding: 1px 2px!important;

大量使用它們使你一些問題的時候。因此，別忘了快速瀏覽this summary。

來源

2014-02-10 00:25:09 Zafar

但如何重用？ – Kiti

如果確保將更具體的選擇器放在更一般的選擇器下面，則不需要使用「！important」。 –

您不應該需要重複任何代碼，或者更糟糕的是，使用!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下了線。

來源

2014-02-10 00:42:14 mmwtsn

如何重用和覆蓋Css風格？

回答

相關問題