一個css屬性值優於另一個cs屬性值

Question

對於一個按鈕，我有3個可能的類：「state-normal」，「state-focus」和「state-hover」。 所有元素具有相同的屬性（背景，邊框，...），但 屬性的值不同。
如果一個按鈕獲得「狀態焦點」，我不想刪除類「狀態正常」。
如果一個按鈕是「狀態焦點」並獲得「狀態懸停」，我不想刪除類「 」狀態焦點「。
在瀏覽器中的語言規範，你可以給一個「質」 /優先語言：

"Accept-Language: da, en-gb;q=0.8, en;q=0.7" 

這將是巨大的，做同樣也在CSS：

.state-normal { background-color: #aaaaaa;q=0.5 } 
.state-focus { background-color: #bbbbbb;q=0.7 } 
.state-hover { background-color: #eeeeee;q=0.9 } 

我知道，有在CSS中什麼也沒有。

但是，我知道在jQuery UI中他們有這樣的一種，因爲他們在向一個元素賦值「ui-state-focus」時不會刪除「ui-state-default」。他們是如何做到的呢？

是否有另一種方法來實現這個技巧（無！重要）。

非常感謝

Answer 1

您可以使用CSS來做到這一點。

.state-normal { background-color: #aaaaaa;q=0.5 } 
.state-normal.state-focus { background-color: #bbbbbb;q=0.7 } 
.state-focus.state-hover { background-color: #eeeeee;q=0.9 } 

但這意味着在規則中提及的所有的類將存在，即，一個元件將具有兩個類存在。因此，類state-focus的元素將不會按照規則設置背景顏色。

如果你想避免這種情況，那麼你就可以做到這一點，而不是：

.state-normal { background-color: #aaaaaa;q=0.5 } 
.state-focus, .state-normal.state-focus { background-color: #bbbbbb;q=0.7 } 
.state-hover, .state-focus.state-hover { background-color: #eeeeee;q=0.9 } 

---

編輯：由於每個操作的要求

CSS Specificity

CSS Selectors - MDN

Similar answer