更改爲相同的CSS路徑顯示了不同的結果

此HTML：更改爲相同的CSS路徑顯示了不同的結果

<html> 
<head> 
<style> 
    #outter_div .span_class a {background: red;} 
    #inner_div span a {background: blue;} 
</style> 
</head> 
<body> 

<div id='outter_div'> 
<div id='inner_div'> 
    <span id='span_id' class='span_class'><a href='index.html'>link</a></span> 
</div> 
</div> 

</body> 
</html>

造成紅色鏈接。

如果我們改變CSS的第一行

#span_id a {background: red;}

鏈接變成藍色。

但兩者#outter_div .span_class a和#span_id a指向同一個元素。

哪裏這種差異從何而來？爲什麼當一切都一樣時顏色會改變？

來源

2011-11-12 Qiao

我試圖解決這一問題 - http://unraveled.com/publications/assets/css_tabs/index.html，所以該選項卡由選項卡標識定義，而不是由正文標識定義。 – Qiao

你知道如何用數學計算你的CSS選擇器的比重？

閱讀本。

how to mathematically calculate the specific weight of your CSS selectors

所以回到你的問題。

#span_id a {background: red;}

1,0，1

#inner_div span a {background: blue;}

1,0，2

因此，鏈接是藍色的。

它以前紅色的，因爲

#outter_div .span_class a {background: red;}

1，1，1

來源

2011-11-12 22:05:30 maxisam

的差異是由一種叫做CSS Specificity。

這是一個概念，它允許您在邏輯順序基於特定類型的使用選擇的數量優先的CSS規則 - ID選擇有最特異性，元素選擇具有最少。

舉例來說，兩個選擇中選擇一個HTML標籤<h1 id="one" class="one">...</h1>：

#one{ 
    color: red; 
} 
.one{ 
    color: blue; 
} 
h1{ 
    color: green; 
}

會出現紅色。刪除#one選擇器現在會使其出現藍色，最後，刪除.one選擇器將使其出現綠色。

來源

2011-11-12 21:55:52 Nightfirecat

更改爲相同的CSS路徑顯示了不同的結果

回答

相關問題