CSS選擇器整理

1、常用選擇器

a) 元素選擇器（簡單選擇器/型別選擇器）：匹配特定標籤的元素，格式為標籤，例如：

p

h1

b) 後代選擇器：匹配特定元素或者元素組的後代，格式為標籤後代，例如：

div p ul

li

c) id選擇器：匹配特定id的元素，格式為 #id，例如:

#information

#blog

d) 類選擇器：匹配特定class的所有元素，格式為 .class，例如：

.last .infor

e) 選擇器分組：多個元素共享同乙個樣式，元素與元素之間用「,」隔開，格式為標籤，標籤例如：

p, h2

元素選擇器和後代選擇器適合應用於那些應用範圍廣的一般性樣式，想要匹配更特定的元素，可以使用id選擇器和類選擇，在實際的專案應用中結合使用元素、後代、id和類這幾種選擇比較常見。我們在使用id選擇器的時候建議直接使用「#id」而不是「div#id」,因為後面的寫法是先查詢所有的div，然後匹配相應id的，讀取速度沒有前者快，而且id在整個文件中是唯一的，不必擔心匹配到多個。

2、偽類選擇器：a) :link，:visited，:active，:hover 與鏈結相關的偽類，它們的順序為link->visited->hover->active,避免出現hover的樣式讀取不到的問題（滑鼠經過未訪問的鏈結時，同時擁有link 和hover兩個屬性，css採取就近原則，優先滿足最近的link樣式，而放棄hover樣式）。

:link和:visited只能應用於錨元素，:hover,:active和:focus理論上可以應用於任何元素。:hover在ie7+中可以應用於任何物件，在ie5/6中，僅能應用於a物件，而且該物件必須要有href屬性，想要在ie5/6下應用，可以在標籤外新增乙個a標籤，並且設定a:hover，然後再寫a標籤內的元素樣式。:active和:focus則被忽略。

b) :first-child匹配父元素的第乙個子元素，格式為標籤:first-child，例如

p

:first-child //設定屬於其父元素的第1個子元素的每個p的背景色

c) ：lang(a)匹配lang屬性為a的元素，格式為標籤：lang(a)，例如:

p
:lang(en)

3、通用選擇器：

a) 通用選擇器可能是所有選擇器中最強大卻最少使用的，它匹配所有可用元素，格式為 *，例如：

*

4、高階選擇器：

a) 子選擇器：子選擇器只選擇元素的直接後代（而後代選擇器選擇乙個元素的所有後代），即子元素，格式為父標籤》子標籤，例如：

h1 > strong   //h1的子元素strong字型顏色為紅色

b) 相鄰兄弟選擇器：選擇緊接在另乙個元素後的匹配元素，而且二者有相同的父元素，格式為標籤+標籤，例如：

p + p //緊跟p元素之後的p元素

c) 同級兄弟選擇器：選擇緊接在另乙個元素後的所有匹配元素，二者有相同的父元素，格式為標籤~標籤，例如：

p~ul //p元素自後所有的同級ul元素

d) 屬性選擇器：根據元素的屬性來匹配，其屬性可以是標準屬性，也可以是自定義屬性，格式為標籤[attr],例如：

[title]
//選擇有title屬性的所有元素
[attr = val]
//選擇屬性為val的所有元素  [title = 「gif」]
[attr ^= val]
//選擇屬性以val開頭的所有元素  [title ^= 「jian」]
[attr $= val]
//選擇屬性以val結束的所有元素  [title $= 「.png」]
[attr *= val]
//選擇屬性中包含val的所有元素  [title *= 「gif」]
[attr ~=val ]
//選擇屬性中包含乙個以空格分割的詞為val的所有元,即屬性中必須有這個詞，而且這個詞要與其他詞之間有空格分割  [title~=」flow」]
[attr|=val]
//匹配屬性為val或者以val-開頭的所有元素  [lang|=」en」]

e) 偽元素選擇器：所有的偽元素選擇器都必須放在出現該偽元素的選擇器的最後邊，也就是說偽元素選擇器不能跟任何派生選擇器（p:after span這個是不合法的），格式為標籤:偽元素,例如：

:first-letter //設定選擇標籤的首字母 p:first-letter :first-line //設定選擇標籤的首行

p:first-line

能夠與:first-letter和:first-line一起使用的屬性有:

a) 字型

b) 字型顏色

c) 背景屬性

d) 外邊距屬性

e) 內邊距屬性

f) 邊框屬性

g) text-decoration

h) vertical-align

i) text-transform

j) line-height

k) float

l) clear

:before //設定選擇標籤的內容前面插入內容，通過設定content屬性來指定要插入的內容，例如：

p

:before // 在段落之前插入紅色字型的「段落」

:after  //設定選擇標籤的內容之後插入內容，通過設定content屬性來指定要插入的內容，例如：

p

:after// 在段落之後插入紅色字型的「段落」

f) 結構性偽類選擇器：結構性偽類選擇器的冒號前面可以不新增任何標籤做限定，也可以新增標籤做選擇。

i. :root 選擇文件根元素，對於html文件，就是html元素

:root

ii. :empty 選擇沒有任何內容（包括空格和文字）的匹配元素（）

p :empty

iii.:not(s) 選擇不符合當前選擇器的任何元素

:not(p) //所有不是p元素的元素

iv. :nth-child(n) 選擇屬於父元素的第n個子元素，n可以是數字、關鍵字或公式

p

:nth-child(2) //設定父元素的第二個子元素且為p標籤的背景色，當為1的時候相當於:firsr-child

v. :nth-of-type(n) 選擇屬於父元素的第n個標籤元素，n可以是數字、關鍵字或公式

p: nth-of-type
(2) //設定父元素中的第二個p元素的背景色

vi. :nth-last-child(n) 選擇屬於父元素的倒數第n個子元素，n可以是數字、關鍵字或公式

p:nth-last

-child(2) //設定父元素的倒數第二個子元素且為p標籤的背景色，當為1的時候相當於:firsr-child

vii. :nth-last-of-type(n) 選擇屬於父元素的倒數第n個標籤元素，n可以是數字、關鍵字或公式

p: nth-last-of-type

(2) //設定父元素中的倒數第二個p元素的背景色

nth-child和nth-of-type的不同之處是前者是父元素的第幾個子元素而且這個子元素匹配相應的標籤才會生效，而後者是父元素中的第幾個相匹配的子元素，不計算其他不符合的元素，nth-last-child、nth-last-of-child是與nth-child、nth-of-type相對應的倒敘設定方法。

:last-child選擇屬於父元素的最後乙個子元素，等同於:nth-last-child(1)

:first-of-type 選擇屬於父元素的第1個子元素，等同於:nth-of-type(1)

:last-of-type 選擇屬於父元素的第1個子元素，等同於:nth-last-of-type(1)

:target 選擇文件中當前活動的目標元素（url帶有後面根由錨名稱#，指向文件內某個具體的元素，這個被鏈結的元素就是目標元素-targetelement。）

g) ui元素偽類選擇器：

i. :enabled 選擇表單中處於啟用狀態的元素

input

:enabled //設定處於啟用狀態的元素背景色

ii. :disabled 選擇表單中處於禁用狀態的元素（與enabled相反）

iii.:checked 選擇表單中被選中的radio或checkbox元素（現在只有opera支援）

iv. ::selection (::-moz-selection火狐中) 選擇使用者滑鼠選取的部分，目前能夠應用的屬性為：color，background，cursor以及outline

CSS選擇器整理

CSS選擇器整理2

CSS選擇器總結待整理

CSS選擇器的簡單整理

CSS選擇器整理

CSS選擇器整理2

CSS選擇器總結 待整理

CSS選擇器的簡單整理

相關推薦

CSS選擇器總結待整理