css選擇器簡介及優先順序

2021-09-25 20:04:30 字數 842 閱讀 7485

本文作者依舊用大白話來解釋

檔案字尾名:  .css

作用:控制網頁內容的外觀(形象點表述相當於為建好的毛胚房裝修)

使用:css常見四種基本用法

鏈結外部樣式檔案(建議使用)

匯入外部樣式檔案(不推薦使用)

使用內部樣式檔案

使用行內樣式檔案

下面就是代表鏈結到與網頁同一目錄下的乙個css資料夾中名叫 b的css檔案

**含義與上面相同

注意 : 按照規範,style要寫在head中

下面代表為頁面內所有li元素設定邊框粗細為1畫素,實線,邊框顏色為黑

下面代表了對本div塊修飾,使背景顏色為藍色

四種基本用法的優先順序(即同時出現時顯示誰的屬性)如下

行內樣式 > 內部樣式》 鏈結外部樣式 > 匯入外部樣式

之後我們來說說在同一樣式單同級別下的優先順序(常見)

根據id選擇(id選擇器)>根據class選擇(類選擇器)>根據標籤型別選擇(元素選擇器)>萬用字元(*)

有了同級別,自然有不同級別

比如下面**

#a

div>.b

雖然a是根據id選擇,b是根據class選擇,但是b明確了是在div的子元素才能使用,也就是說找到了它的父親,因此b的優先順序更高,同理div>p> li{}哪怕是元素選擇器,它的優先順序也比a和b 高

CSS選擇器及優先順序

css優先順序的計算公式 通常我們可以將css的優先順序由高到低分為六組 無條件優先的屬性只需要在屬性後面使用 important 它會覆蓋頁面內任何位置定義的元素樣式。當然,ie 6不支援這個屬性,於是它也成為一種hack被很多人所熟知,真正使命被人淡忘。第二高位的優先屬性是在html中給元素標籤...

CSS選擇器及優先順序

css選擇器 css選擇器優先順序 解釋 對一種有標識的內容進行樣式變化 標籤選擇器 對應的標籤檔案所有對應的標籤都會被選擇修飾 選擇器名 標籤 類選擇器 標籤內的屬性 class 值 選擇器名 class 顧名思義,是一類的內容使用同一種樣式 id選擇器 標籤內的屬性 id 值 選擇器名 id i...

css選擇器及優先順序

後代選擇器 div p 選擇div元素裡面的所有p元素 子選擇器 div p 選擇父元素為div的所有p元素 同胞選擇器 div p 選擇所有緊跟在div之後的p元素 組選擇器 div,p 選擇所有的div和p元素 共同選擇器 div.name 選擇所有類名為name的div元素。即同時滿足 此外還...