可以：懸停適用於特定於父div的通用元素標籤嗎？

我正在使用一堆div（用PHP創建）來生成一個可點擊元素塊。我需要做的是將一些樣式應用於這些通用元素，而不是特定元素，但使用下面的代碼似乎是無效的。可以：懸停適用於特定於父div的通用元素標籤嗎？

#Container { 
height: 80%; 
width: 60%; 
background-color: green; 
} 
#Container div:hover { 
background-color: blue; 
} 

<div id="Container"> 
    <div style="background-color: red; width: 100px; height: 100px;">  
</div>

http://jsfiddle.net/XD2eZ/

所以我不知道這是否是一個問題，一個普通的div元素不能被作爲樣式的子元素，並有一個：即正常工作懸停屬性。我知道可以指定類或id來處理這個問題，但擁有數千個獨特的div。我也不能使用

#Container:hover div{ background-color: blue;}

，因爲它也似乎是無效的，但我需要從一個塊中選擇一個元素，而不是一下子。

這裏的任何想法？提前致謝。

來源

2013-08-23 Thomas Cheney

嵌入式樣式優先於您當前的懸浮式選擇器 –

除了@ PatrickEvans的評論之外，還可以使用'！important'並且應該可以工作。即。 'background-color：blue！important;' – vee

根據@PatrickEvans的評論：http://jsfiddle.net/qolami/XD2eZ/3/ –

如果您刪除從HTML背景顏色這將工作，並使用CSS應用它：

#Container { 
    height: 80%; 
    width: 60%; 
    background-color: green; 
} 
#Container div {background-color: red;} 

#Container div:hover { 
    background-color: blue; 
}

例子：http://jsfiddle.net/XD2eZ/1/

的reasone是CSS Specificity - 一個style屬性規則是更具體的（更強）比ID +元素規則。

來源

2013-08-23 16:17:29 Kobi

工作就像一個魅力。謝謝，應該記住這一點。 –

可以：懸停適用於特定於父div的通用元素標籤嗎？

回答

相關問題