css選擇器及優先順序

2021-09-06 08:33:27 字數 670 閱讀 4169

後代選擇器

div p :選擇div元素裡面的所有p元素

子選擇器

div > p : 選擇父元素為div的所有p元素

同胞選擇器

div + p : 選擇所有緊跟在div之後的p元素

組選擇器

div,p : 選擇所有的div和p元素

共同選擇器

div.name : 選擇所有類名為name的div元素。即同時滿足

此外還有id選擇器#id,偽類選擇器div:hover,類選擇器.name,屬性選擇器[attribute] [attribute=name]。

:hover 可以選擇所有指標位於其上的元素

選擇器權重及優先順序

優先順序:!important > 行內樣式 > id > 類選擇器 , 屬性選擇器 , 偽類選擇器》 元素(偽元素,標籤)選擇器 > 萬用字元

同等級的根據選擇器數量來計算權重。權重相同的樣式,頁內樣式大於外聯樣式,如果同時處於頁內或者外聯時,先載入的會被後載入的覆蓋。

先比較元素優先順序,相同時比較權重,權重相同時看位置(是頁內樣式還是外聯樣式),位置相同時看載入先後順序。

題目:

問a的顏色是什麼?如果去掉#box a 呢?

CSS選擇器及優先順序

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

CSS選擇器及優先順序

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

CSS選擇器及選擇器優先順序

css選擇器有四種,標籤名選擇器,id選擇器,class選擇器,屬性選擇器,其中屬性選擇器權重最低且不常用 兩個選擇器a和b使用,連寫時,表示選擇滿足a或滿足b的元素 p2,p3兩個選擇器a和b使用空格連線時,表示選擇滿足a選擇器的元素內部的滿足b選擇器的元素 list a選擇器a和b使用 連寫時,...