選中的複選框不透明度，當宣佈之後

我想隱藏默認勾選，當它的選擇，在表headd或相應的行懸停顯示一個複選框規則甚至重寫在Chrome開發工具中檢查結果，第二個規則適用，但不透明屬性被刪除。我需要添加!important以獲得所需的結果。這是爲什麼？選中的複選框不透明度，當宣佈之後

來源

2016-04-27 Sven

這是因爲CSS的特殊性。你可以給更多的特異性的規則，使之更加重要，而不!important一句：

.table td input[type=checkbox] { 
    opacity: 0; 
} 

.table th input[type=checkbox], 
.table tr:hover input[type=checkbox], 
.table tr td input[type=checkbox]:checked { 
    opacity: 1; 
}

如何特異性的作品？

內嵌樣式元素：1000個
編號：100
標籤：10個
類名和屬性：1

如果您的總和，你會獲得特異性。應用的規則越具體。

來源

2016-04-27 12:00:48

既然這樣，不需要'更多'的特殊性，'.table td input [type = checkbox]：checked'就足夠了。即使他之前指定了它，它也會應用，因爲'：checked'。類，屬性**和僞類**應該值得相同，例如2. – skobaljic

你說得對，我只寫這個選擇器來顯示特定性如何增長 –

這有點誤導。這些並沒有真正的價值。如果您有11個標籤，則它不會累加到110並覆蓋單個標識。這些工作在數量級上，換句話說，單個ID將始終優先於任何數量的類名，並且ID將永遠不會覆蓋內聯樣式。 – RyNo

因爲

.table td input[type=checkbox]

有更多specificity比

input[type=checkbox]:checked

特異性計數比在你的規則中聲明的垂直順序多，因此第一條規則勝出。

來源

2016-04-27 12:01:24 Utkanos

如果你按照第一個特定的方式進行分配，那麼你並不需要使用！因此，input[type=checkbox]:checked使用.table td input[type=checkbox]:checked，這樣css將應用第二條規則，因爲它與第一條規則相同：

.table td input[type=checkbox] { 
    opacity: 0; 
} 

.table th input[type=checkbox], 
.table tr:hover input[type=checkbox], 
.table td input[type=checkbox]:checked { 
    opacity: 1; 
}

來源

2016-04-27 12:13:05

選中的複選框不透明度，當宣佈之後

回答

相關問題