更具體的CSS規則不工作

在我下面的代碼，我已經定義爲H1爲#inner H1和更少的特定規則更具體的規則爲#container的H1也被定義。但是，如果在#inner h1之後放置#container h1，則它將生效，並且#inner h1將被忽略，而不應該是因爲它更具體。更具體的CSS規則不工作

請幫我理解這個問題。

CSS：

#inner h1 { font-size:25px; } 
#container h1 { font-size:15px; }

HTML：

<div id="container"> 
    <div id="inner"> 
    <h1>Hello World!</h1> 
    </div> 
</div>

來源

2012-01-01 Shawn Taylor

不，'#inner h1'並不比'#container h1'更具體。他們都有101的特異性（我相信，http://www.htmldog.com/guides/cssadvanced/specificity/）。僅僅因爲一個元素是INSIDE的另一個元素，並不能使其內部更具體。 – Charlie 2012-01-01 06:48:14

@Charlie：請注意，它不是字面上的一百一十一個 - 例如，11個類選擇器將不會覆蓋單個ID選擇器。這更像是一個零一個。 – BoltClock 2012-01-01 06:50:43

感謝您的澄清 – Charlie 2012-01-01 07:16:28

這可能是你的特異性的想法是有點過。特定性必須是一個上下文無關的想法：由於CSS可以獨立於HTML進行加載，因此您不必使用HTML文檔來猜測哪個規則更「特定」。考慮這個其他有效的例子：

<div id="inner"> 
    <div id="container"> 
    <h1>Hello World!</h1> 
    </div> 
</div>

在這個片段中，你將不得不去對你最初的猜測，inner應更加具體。這意味着你的解釋需要上下文（哪些CSS沒有）。

問題是，這兩個規則都具有相同的特徵（h1由id標識的元素的後代），並且選擇器沒有給予更接近的後代更高的優先級。

在平等的情況下特異性兩種規則，獲勝者是在CSS中聲明的最後一個。

來源

2012-01-01 06:41:07 zneak

好的解釋 – grc 2012-01-01 06:44:24

另一件事：組合器根本無助於特異性，因此交換'>'的空間不會影響哪個規則優先，因爲兩個組合器都沒有特異性。看到[這個問題]（http://stackoverflow.com/questions/8096829/why-do-foo-bar-and-foo-bar-have-the-same-specificity-in-css） – BoltClock 2012-01-01 06:59:55

-2

這是不是在所有:) CSS問題解析班一個又一個的最後一個規則覆蓋，當然以前，如果先前是沒有更具體或不包括！重要的陳述在裏面，你可以把字體大小：25px！重要;第一，使其覆蓋的最後一個規則，否則只需要改變的類

來源

2012-01-01 06:35:43

類？什麼課程？ – grc 2012-01-01 06:37:42

是不是#inner h1更具體？ – 2012-01-01 06:41:27

@grc，css類lol – 2012-01-01 07:00:07

地方這些都具有相同的特異性和你注意，它們出現在樣式表的順序是指，被應用的樣式規則的決定因素。

有很多種的，你可以結構的規則，以獲得更多的特異性方法，但一般我會留在!important修改了。

欲瞭解更多信息，請參閱6.4.3 Calculating a selector's specificity在W3的CSS規範。

來源

2012-01-01 06:38:56 steveax

#inner h1更具體嗎？ – 2012-01-01 06:41:46

還有一篇關於選擇者特異性的有用文章（昨天有類似問題），http://www.htmldog.com/guides/cssadvanced/specificity/ – Charlie 2012-01-01 06:43:05

@ShawnTaylor不，這兩者具有相同的特異性。 – steveax 2012-01-01 06:46:39

更具體的CSS規則不工作

回答

相關問題