CSS：使類優先於元素造型

我不想使用!important，但如果沒有其他方法可以使用此工作，我將會使用!important。CSS：使類優先於元素造型

我有一個CSS規則，確定按鈕看起來是這樣的：

input[type=button] { 
font: 24px "TF"; 
border-radius: 3px; 
color: white; 
background-color: #005299; 
cursor: pointer; 
}

然後，對於某些按鈕，點擊它時，它應該觸發一個名爲selected類。這個類應該改變按鈕的background-color，但它不會優先於元素樣式（顏色不會改變，Firebug會顯示具有穿透效果的類）。我如何使selected課程優先？

在極端的情況下，我也可以切換與JQuery的CSS樣式，但我不想。

來源

2014-09-28 StrongJoshua

'input [type = button]'具有比'.selected'更高的特異性值。看看：http://stackoverflow.com/questions/21329824/overriding-css-properties-for-a-specific-html-element/21329995#21329995 – 2014-09-28 20:21:20

@HashemQolami屬性選擇器具有完全相同的特性作爲一個類選擇器，但無論如何這並不重要，因爲問題與內聯樣式有關。（哦，等等 - 是的，你是對的，因爲它明確包括'input' - 所以'input.selected'將會是一樣的。） – Pointy 2014-09-28 20:22:16

@Pointy我知道，你錯過了'input'部分， 0,1,1'特異性值。此外，沒有內聯樣式將被添加到按鈕。 OP提到：'它應該切換一個名爲selected的類' – 2014-09-28 20:24:14

因爲在你的DOM元素將會有一個「類型」屬性設置唯一的排序爲「按鈕」是<input>元素，使用標籤名稱是不是真的必要。堅持使用最簡單的選擇器是一種很好的做法，在這種情況下，只是普通的

[type=button] { 
    font: 24px "TF"; 
    /* ... */ 
}

會工作得很好。然後你可以跟着

.selected { 
    background-color: green; /* or whatever */ 
}

和級聯規則可以像你期望的那樣工作。

如果你覺得你必須有input預選賽中，你可以在類選擇加倍：

.selected.selected { 
    background-color: green; 
}

但是這幾乎相當於一劈爲!important（不太一樣多，我想）。

來源

2014-09-28 20:28:17 Pointy

我沒有意識到我是通過在那裏輸入''來進行雙重標記的！謝謝：） – StrongJoshua 2014-09-28 20:49:34

您需要使您的覆蓋選擇器更具體。

例如：

input[type=button].selected

來源

2014-09-28 20:18:49 SLaks

你確定嗎？內聯樣式的特殊性勝過一切（或者我認爲 - 現在測試） – Pointy 2014-09-28 20:20:52

@Pointy：是的，但他沒有使用內聯樣式。 – SLaks 2014-09-28 20:22:56

也許你是對的;我不確定OP的含義是什麼，「...元素造型」。 – Pointy 2014-09-28 20:23:50

CSS：使類優先於元素造型

回答

相關問題