CSS屬性特性

1) #divID input[type='text'] 
    { 
     height:30px; 
    } 

2) #divID .ClassName 
    { 
     height:40px; 
    }

對於div中的文本框，我定義了上述樣式。 2比1更具體，但渲染高度爲30px。它是如何工作的？CSS屬性特性

來源

2013-01-25 ABC

如果這兩個選擇是爲了適用於同一元素，則沒有繼承參與。繼承只能從一個父元素到一個子元素，即使'height'也不會被默認繼承。 – BoltClock

不知道你爲什麼被低估，因爲我認爲這是一個合法的問題。即使你知道選擇器的特殊性，你也許不會意識到'輸入'部分 –

2並不比1更具體。1實際上更具體。

CSS選擇器分爲三個級別（出於本討論的目的;實際上更多是因爲style屬性和!important）。

ID選擇器#處於最高級別。

類和屬性.ClassName,[type=text],[id=x]與僞類一樣處於第二級。

元素和僞元素位於最底層。

一層關係移動到下一層。兩個規則集都與ID和類/屬性級別相關聯（.ClassName和[type=text]已綁定）。

第一個規則集有一個元素作爲選擇器的一部分，但另一個沒有。因此，第一個規則集在最低級別上獲勝。

http://css-tricks.com/specifics-on-css-specificity/
http://www.w3.org/TR/CSS21/cascade.html#specificity

來源

2013-01-25 04:18:35

'style'和'！important'的作用更多是一個級聯問題;特異性大部分是指選擇器。特別是'！important'是per-declare，它允許你在不改變選擇器的情況下覆蓋一個或多個特定屬性* only *。 CSS2.1文檔並沒有將這些區別非常明確，但它確實很好地定義了它們應該級聯的順序。 – BoltClock

回答

相關問題