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

#####（一）選擇器詳解

1.標籤選擇器（元素選擇器）:html標籤作為選擇器，作用是選取html文件中相同的html元素p{}

2.類選擇器

第一步：設定類名《開始標籤 class="類名">3.id選擇器第一步：設定id名《開始標籤 id="類名">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.[屬性名|="屬性值"]    選取具有某個屬性，且其屬性值以某些字串作為字首，或屬性值為該字串，如
測試1測試2	[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 選取文件的根元素，即標籤 :empty 選取文件中的空元素（所謂空元素，就是指該元素中連文本性資訊都沒有） :not(被否定的元素) 否定偽類選擇器，用來排除某些元素

:target 選取文件中具有錨點的元素，當超連結被啟用時發揮作用

#####（二）選擇器的權重

第一等：行內樣式，如style="font-weight:bold"，權重為1000 第二等：id 選擇器（例如，#example），權重為0100 第三等：類選擇器(例如，.example)，屬性選擇器（例如，[type="radio"]）和偽類（例如，:hover），權重為0010 第四等：標籤選擇器（例如，h1）和偽元素（例如，::before），權重為0001 第五等：通配選擇符（*）關係選擇符（+, >, ~, ' ', ||）和否定偽類（:not()）對優先順序沒有影響

第六等：繼承樣式

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

CSS選擇器的權重詳解

CSS選擇器的權重詳解

CSS選擇器和其他選擇器及權重

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

CSS選擇器的權重詳解

CSS選擇器的權重詳解

CSS選擇器和其他選擇器及權重

相關推薦