四 . css系列之選擇器詳解及權重

(一)選擇器詳解
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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章