(一)選擇器詳解
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