四 . css系列之選擇器詳解及權重
阿新 • • 發佈:2018-12-26
(一)選擇器詳解
1.標籤選擇器(元素選擇器):HTML
標籤作為選擇器,作用是選取HTML
文件中相同的HTML元素P{}
2.類選擇器
第一步:設定類名<開始標籤 class="類名"></結束標籤>
第二步:為類設定樣式.類名{}
注意:
1.同一文件中類名可以相同
2.class後面可以有多個值,用空格分開
3.id選擇器
第一步:設定id名<開始標籤 id="類名"></結束標籤>
第二步:為id設定樣式#id名{樣式}
注意:
1.同一文件中,id名必須唯一
2.id的權重大於class
4.全域性選擇器(萬用字元選擇器):*
,選取文件中所有元素
5.群組選擇器:將多個選擇器用逗號連線在一起,形成一個組,使它們應用同種樣式,如p,h3{}
6.偽類選擇器
:link 設定超連結的預設效果
:visited 設定超連結被訪問過後的樣式
:hover 設定元素被滑鼠滑過的樣式
:active 設定元素被啟用時的樣式
:focus 設定元素獲得輸入焦點時的樣式
注意:LVHA
7.後代選擇器:用來選擇一個元素的所有後代元素,選擇器間用空格分隔,如div p{},表示div的後代p
8.子選擇器:用來選擇一個元素的子元素,兩個選擇器間用>分隔,如div>P{},表示選擇div的子元素,且這個子元素是p標籤
9.屬性選擇器:通過元素的屬性或屬性值來獲取元素
a.[屬性名]{樣式} 選取具有某個屬性的所有元素 b.匹配元素[屬性名]{樣式} 選取具有某個屬性且匹配前面的“匹配元素”的所有元素 c.[屬性名1][屬性名2]{樣式} 選取具有多個屬性的所有元素 e.[屬性名="屬性值"]{樣式} 選取具有某個屬性且具有指定屬性值的所有元素 f.[屬性名~="屬性值1 屬性值2 屬性值3..."] 選取具有某個屬性且包含 某個屬性值的所有元素 g.[屬性名|="屬性值"] 選取具有某個屬性,且其屬性值以某些字串作為字首,或屬性值為該字串,如 <p title="a-1">測試1</p> <p title="a">測試2</p> [title|="a"]{},會選取到測試1和測試2 h.[屬性名^="字串"] 選取具有某個屬性,且屬性值以某些字元開頭的所有元素 i.[屬性名$="字串"] 選取具有某個屬性,且屬性值以某些字串做結尾的所有元素 j.[屬性名*="字串"] 選取具有某個屬性,且屬性值中包含指定字串的所有元素
10.交集選擇器:將兩個選擇器緊挨著寫在一起,作用是選取這兩個選擇器的交集部分,格式有三:
a.標籤選擇器.類名
b.標籤選擇器#id名
c.標籤選擇器[屬性名="屬性值"]
11.結構偽類選擇器:用於選取一個結構中的某個元素
:first-child 選取結構中第一個元素
父元素 :first-child 選取某個結構中的第一個元素
父元素 匹配物件:first-child 選取某個機構中的第一個元素,且這個元素必須和匹配物件向匹配
:last-child 選取結構中最後一個元素
:nth-child(n) 選取結構中第n個元素
:nth-last-child(n) 選取結構中倒數第n個元素
元素型別:nth-of-type(n) 按類別查詢結構中的第n個元素
元素型別:nth-last-of-type(n) 按型別在結構中查詢倒數第n個元素
元素型別:first-of-type 按型別查詢結構中第一個符合某種型別的元素
元素型別:last-of-type 按型別查詢結構中最後一個符合某種型別的元素
12.偽元素選擇器
:first-letter 選取一個元素的第一個字元
:first-line 選取一個元素的第一行內容
:before 在一個元素前面插入相應內容,常和content結合使用
:after 在一個元素後面插入內容,常和content結合使用
注意:
:first-line
:first-letter
這兩個選擇器的應用物件是塊級元素
13.UI元素狀態偽類選擇器
:enabled 選取介面中可用元素
:disabled 選取介面中不可用元素
14.通用兄弟元素選擇器
選擇器1~選擇器2 選取的是選擇器1後面的所有選擇器2,如div~p,選取的是div後面的所有p元素
選擇器1+選擇器2 選取的是選擇器1後面的第一個選擇器2元素,如div+p,選取的是div後面的第一個p元素
:root 選取文件的根元素,即<html>標籤
:empty 選取文件中的空元素(所謂空元素,就是指該元素中連文字性資訊都沒有)
:not(被否定的元素) 否定偽類選擇器,用來排除某些元素
:target 選取文件中具有錨點的元素,當超連結被啟用時發揮作用
(二)選擇器的權重
標籤選擇器的權重為0001
class選擇器的權重為0010
id選擇器的權重為0100
屬性選擇器的權重為0010
偽類選擇器的權重為0010
偽元素選擇器的權重為0010
包含選擇器的權重:所包含選擇器的權重之和
子選擇器的權重:所包含選擇器的權重之和
交集選擇器權重為選擇器之和
繼承樣式的權重為0000
行內樣式的權重為1000