css權威指南_特指度
阿新 • • 發佈：2019-05-02
都沒有 weight rom class eight 為什麽 margin 可能 同時
<!DOCTYPE html> <html> <head> <meta charset="urf-8"> <title>css權威指南_特指度</title> <style> body{ margin: 0; padding: 0; } .sign{ color: red; font-weight: bold; } h1, h2, #grape3, h4{ height: 2em; /*特指度 = 0,1,0,2 相同屬性選擇符在同一特指度位累加*/ } h1{ background: red; /*特指度 = 0,0,0,1 */ } h2{ background: silver; /*特指度 = 0,0,0,1 */ } h1.grape{ color: white; /*特指度 = 0,0,1,1 */ } h2.grape2{ color: yellow; /*特指度 = 0,0,1,1 */ } #grape3{ background: green; /*特指度 = 0,1,0,0*/ } *{ color: gray; /*通用選擇符將所有元素字體顏色設置為灰色，但是根據規則 通用選擇符不增加特指度即0,0,0,0*/ } h4{ background: blue; color: white; } h4 > span{ background: white; /*特指度 = 0,0,1,1 註意這裏連接符不增加特指度,連零都不是*/ } h5{ background: transparent !important; /*重要聲明和非重要聲明分開處理，重要聲明始終勝出*/ } </style> </head> <body> <h3> <pre> /* From: CSS權威指南(第四版)_3.1_特指度 Q: 我們可以用多種方式選擇設置元素的樣式, 同一個元素可能被一個或多個規則選擇 而且每個規則的選擇符都不盡相同，因為匹配的元素只能為其中一個樣式，那麽如何 知道那個規則勝出？ A: 用戶代理會計算每個規則中選擇符的特制度，然後將其依附到規則中的聲明上，如果 兩個或多個屬性聲明有沖突，特制度最高的聲明勝出 R: 一個特指度值由四部分構成，例如0,0,0,0 選擇符的特指度通過下述規則確定: 1、選擇符中的每個ID屬性加0,1,0,0 2、選擇符中的每個類屬性值、屬性選擇或偽類加0,0,1,0 3、選擇符中的每個元素和偽元素加0,0,0,1，偽類到底有沒有特指度在css2中表述的有些 自相矛盾，不過css2.1明確指出，偽元素有特指度 <span class="sign">4、連接符和通用選擇符不增加特指度</span> </pre> </h3> /*section_1*/ <h1 class="grape">abc</h1> /*section_2*/ <h2 class="grape2">def</h2> /*section_3*/ <h3 id="grape3">hij</h3> /*section_4*/ <h4 class="grape4">sss<span>XXXX</span>sss</h4> /*span元素字體顏色繼承h4樣式，即字體顏色為白色*/ 同時我們還設置了全局字體顏色為灰色，實際顯示效果也為灰色，這裏體現了另一個特點: 即規則第四條： 繼承不增加特指度，具體來說跟連接符一樣連特指度都沒有那就是連零都不是， 通用選擇符的特指度為0,0,0,0，所以span內元素字體顏色為灰色，而非繼承自父元素 */ /*section_5*/ <h5 style="background: orange; height: 2em;">行內樣式特指度</h5> /*目前所見到的特指度都以零開頭，因此你可能在想， 那一位為什麽要存在呢？ 存在必定有用。 那一位是為行內樣式聲明保留的，行內樣式聲明的特指度比其他的聲明都要高*/ </body> </html>
css權威指南_特指度