通過上述內容,我們可以將CSS選擇器分為以下幾類:
& ltscript async src =“//js fiddle . net/hy sunny/3 gwbeu 3v/embed/html,css,result/“& gt;& lt/script & gt;
示例:
說明:後面的e表示元素,attr表示屬性,val表示屬性的值。
描述:下面的e表示壹個元素。
示例:
示例:
示例:
示例:
e:not(s),匹配任何與當前選擇器不匹配的元素。
示例:
e:目標,匹配單擊文檔中特定“id”的效果。
示例:
這裏我們簡單討論壹下後代元素選擇器和子元素選擇器的區別。
例子
CSS優先級是指在瀏覽器中解析CSS樣式的順序。
多種樣式:如果外部樣式、內部樣式和內聯樣式同時應用於同壹個元素,這就是多種樣式的使用。
壹般來說,(外部樣式)外部樣式表《(內部樣式)內部樣式表《(內聯樣式)內聯樣式
例外:如果外部樣式放在內部樣式後面,外部樣式將覆蓋內部樣式。
示例:
為不同的選擇器分配不同的權重。
解釋:
例子
結果:標簽中的數據顯示為藍色。
比較風格的優先級是計算不同選擇器的數量,然後將它們與相應的權重相乘。根據結果,可以獲得優先級。
看到這裏,有些同學是對的!重要的是有點困惑。為什麽它是最高優先級?我們來詳細說說吧!重要~
!重要的是CSS1中定義的語法,用於提高指定樣式的應用優先級。
語法格式:{cssRule!Important},即寫在定義的末尾,例如:box {color: red!重要信息}
已聲明!重要的風格,優先級最高,相當於寫在最底層(最後定義)。
不完全支持IE 6.0!重要的
IE支持重新定義!重要信息,例如:
妳會發現當定義了style class =“yuanxin”時,在IE下,字體顯示為紅色(#e00)。
但不是同壹個定義!重要的。例如:
目前在IE6下不支持,妳會發現當定義style class =“yuanxin”時,字體顯示為黑色(#000)。
解釋:
當important的樣式屬性和覆蓋它的樣式屬性分開使用時(不在壹個{}),IE 6.0認為!重要的具有更高的優先級,否則它將被包括在內!當重要的樣式屬性被相同{}中的樣式覆蓋時,IE 6.0認為!重要的是更低!
再舉壹個例子:
因為IE 6.0從未完全支持這種語法,但其他瀏覽器支持。所以我們可以利用這壹點來分別利用它!重要的是,我們可以為IE和非IE瀏覽器設置不同的風格,只需在非IE瀏覽器風格後添加即可!重要的。
完成了。
概要內容涉及以下內容:
W3school_CSS選擇器參考手冊
阮壹峰_關於_CSS選擇器的說明
深入了解css選擇器優先級
CSS的優先級機制【摘要】
非常感謝n(*≧▽≦*)n的分享
註:原文章首次出現在:CSS選擇器、優先級和!重要的知識總結,現在移到這裏。
& ltscript async src =“//js fiddle . net/hy sunny/3 gwbeu 3v/embed/html,css,result/“& gt;& lt/script & gt;