當前位置:成語大全網 - 書法字典 - CSS選擇器、優先級和!重要知識總結

CSS選擇器、優先級和!重要知識總結

對於CSS選擇器,請先看這裏:CSS選擇器參考手冊。

通過上述內容,我們可以將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;