CSS問題：什麼有優先權？

我不是新來的CSS，我只是不太熟練。我今天遇到了一個'問題'，讓子元素被父母的css覆蓋。在一些頭部劃傷之後，我意識到我需要做的就是添加一個'！重要」的CSS（它向你展示我的能力是全新的我）CSS問題：什麼有優先權？

（我已經把那說明了生活的色彩我的問題的工作示例@） http://jsfiddle.net/4RYM3/1/

#byIdName div{ /* #1 */ 
     margin: 30px; 
    background:#FF00FF; 
} 
div#ByIdNameTwo{ /* #2 */ 
      margin: 30px; 
    background:#00FF00; 
} 
div.idone{ 
    margin: 20px; 
    background:#FFFF00; 
} 
div.idtwo{ 
    margin: 0px; 
    background:#cccccc; 
} 
div.idone2{ 
    margin: 20px ! important; 
    background:#FFFF00 ! important; 
} 
div.idtwo2{ 
    margin: 0px ! important; 
    background:#cccccc ! important; 
}

現在看這個，我不明白爲什麼＃1和＃2似乎行爲不同（請看上面的jsfiddle鏈接）。
雖然我很高興我得到了這個工作（與！重要）我失去了爲什麼＃1和＃2的行爲方式，他們是。

任何人都可以闡明這種行爲？

是一種首選的方法，另一種看不起，如果是的話，爲什麼（這是我的主要問題）？

在此先感謝

來源

2010-11-17 Harrison

這些不同的行爲，因爲#byIdName div是指與父母#byIdName型格的任何兒童

這div#ByIdNameTwo是指任何與DIV ID #byIdNameTwo

直飛兒童使用#byIdName>div

任何孩子，包括祖父子孫子等....等。使用

#byIdName div

來源

2010-11-17 20:40:59

沒關係，所以他們是不一樣的，但對孩子不應該有一個「>」？（http://www.w3.org/TR/CSS2/selector.html#child-selectors） - 這個級別的CSS對我來說是新的，所以我希望我的問題不是太小巧 – Harrison 2010-11-17 20:45:10

'''意味着該孩子從父母繼承屬性。 – 2010-11-17 20:47:10

明白了！（沒有讀得太遠）http://www.w3.org/TR/CSS2/selector.html#descendant-selectors。謝謝 – Harrison 2010-11-17 20:48:44

的！重要的規則是一種方法，使你的CSS層疊，但也有你覺得是最重要的永遠是適用的規則。

儘管基於瀏覽器的具體實現工作方式不同。

此處瞭解詳情：http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

來源

2010-11-17 20:37:10 wajiw

哎鞣製，這是一個有點難以解釋，但這裏是我的嘗試：

一般

，更具體的選擇將覆蓋更廣泛的一個。 IDS意味着是非常具體（每頁一個），類更一般（多達你每頁要）。

因此，當您使用#byIdName div時，它將覆蓋ID爲'#byIdName'的元素內的任何div的類'.idtwo'，因爲以id開頭的聲明更具體。

在第二種情況下，div#ByIdNameTwo僅引用具有該id的div，不影響子div。

我希望能解釋它。

- 另外，我強烈建議你避免使用！重要的規則，因爲它是以後維護代碼的毒害（並且它表明程序員並不真正瞭解級聯規則）。我不是說這是個人的冒犯，我曾經喜歡自己喜歡!important，但是它的黑客和更好的避免。

來源

2010-11-17 20:48:17

我想在這種情況下使用！重要的是肯定地表明程序員並不真正理解級聯規則;但我會把你的建議放在心上。 – Harrison 2010-11-17 20:56:06

嘿，我們都開始不理解，你應該看到我的JavaScript。 :) – 2010-11-17 21:01:31

#byIdName div{ /* #1 */ 
     margin: 30px; 
    background:#FF00FF; 
}

該代碼塊僅針對具有「byIdName」屬性的元素的INSIDE的div。

div#ByIdNameTwo{ /* #2 */ 
      margin: 30px; 
    background:#00FF00; 
}

這段代碼只針對一個ID爲「ByIdNameTwo」的div元素。如果它不是具有該ID的div，它將被忽略。

此外，ID選擇器將覆蓋類選擇器，因爲它更具體。添加「！重要」可以解決這個問題，但不推薦。使用「！重要」不是在有更好的替代品時應該鼓勵的做法。

較好的解決辦法是這樣的：

#ByIdNameTwo.idone2 { 
    margin: 20px; 
    background: #FFFF00; 
}

作爲附加的註釋，儘量避免使用在你的CSS選擇器不必要的元素（如在這種情況下「格」）。它實際上需要更長的CSS選擇器引擎才能找到匹配這些類型的規則，而不僅僅是使用ID或類名稱。

來源

2010-11-17 20:50:35 RussellUresti

CSS問題：什麼有優先權？

回答

相關問題