CSS選擇器

基本選擇器

選擇器	含義	CSS版本	優先級
*	通用元素選擇器,匹配任何元素	2	0,0,0,0
E	標籤(元素)選擇器,匹配全部使用E標籤的元素	1	0,0,0,1
.class1	class選擇器,匹配全部class屬性中包含class1的元素	1	0,0,1,0
#id1	id選擇器,匹配全部id屬性中等於id1的元素	1	0,1,0,0

其中,0,1,0,0中的第一位表示是不是內聯的意思,是則爲1,不是爲0

多元素的選擇器組合

選擇器	含義	CSS版本	優先級
E,F	羣組選擇器,同時匹配E,F元素,元素之間用,隔開	1	權重相加
E F	後代元素選擇器,匹配全部屬於E元素後代的F元素,元素之間用空格隔開	1	權重相加
E>F	子元素選擇器,匹配全部E元素的子元素F	2	權重相加
E+F	相鄰同胞選擇器,匹配全部緊隨E元素以後的同級F元素	2	權重相加
E~F	同級元素通用選擇器,匹配任何在E元素以後的同級F元素	3	權重相加

屬性選擇器

選擇器	含義	CSS版本	優先級
E[attr]	匹配全部具備attr屬性的E元素	2	0,0,1,0
E[attr=val]	匹配全部attr屬性等於"val"的E元素	2	0,0,1,0
E[attr~=val]	匹配全部attr屬性具備多個空格分隔的值,其中一個值等於"val"的E元素	2	0,0,1,0
E[attr¦=val]	匹配全部attr屬性具備多個連字號(-)分隔的值,其中一個值以"val"開頭的E元素	2	0,0,1,0
E[attr^="val"]	屬性attr的值以"val"開頭的元素	3	0,0,1,0
E[attr$="val"]	屬性attr的值以"val"結尾的元素	3	0,0,1,0
E[attr*="val"]	屬性attr的值包含"val"字符串的元素	3	0,0,1,0

僞類選擇器

選擇器	含義	CSS版本	優先級
E:link	匹配全部未被點擊的連接	1	0,0,1,0
E:visited	匹配全部已被點擊的連接	1	0,0,1,0
E:active]	匹配鼠標已經激活尚未釋放的E元素	1	0,0,1,0
E:hover	匹配鼠標懸停其上的E元素	1	0,0,1,0
E:lang(language)	匹配lang屬性等於language	2	0,0,1,0
E:focus	匹配得到當前焦點的E元素	2	0,0,1,0
E:first-child	匹配父元素的第一個子元素	2	0,0,1,0

CSS3中僞類,好比:hover寫爲::hover,這是爲了與僞元素做區分,爲了支持舊版的網站,之前的單引號僞類還有效

與用戶界面有關的僞類

選擇器	含義	CSS版本	優先級
E:enabled	匹配表單中激活的元素	3	0,0,1,0
E:disabled	匹配表單中禁用的元素	3	0,0,1,0
E:checked	匹配得到當前焦	3	0,0,1,0

結構性僞類

選擇器	含義	CSS版本	優先級
E:root	匹配文檔的根元素,對於HTML文檔,就是HTML元素	3	0,0,1,0
E:nth-child(n)	匹配其父元素的第n個子元素,第一個編號爲1	3	0,0,1,0
E:nth-last-child(n)	匹配其父元素的倒數第n個子元素,第一個編號爲1	3	0,0,1,0
E:nth-of-type(n)	與:nth-child()做用相似,可是僅匹配使用同種標籤的元素	3	0,0,1,0
E:nth-last-of-type(n)	與:nth-last()做用相似,可是僅匹配使用相同標籤的元素	3	0,0,1,0
E:last-child	匹配父元素的最後一個子元素,等同於:nth-last-child(1)	3	0,0,1,0
E:first-of-type	匹配父元素下使用同種標籤的第一個子元素,等同於:nth-of-type(1)	3	0,0,1,0
E:last-of-type	匹配父元素下使用同種元素的最後一個子元素,等同於:nth-last-of-type(1)	3	0,0,1,0
E:only-child	匹配父元素下僅有的一個子元素,等同於:first-child:last-child或:nth-child(1):nth-last-child(1)	3	0,0,1,0
E:only-of-type	匹配父元素下使用同種標籤的惟一一個子元素,等同於:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)	3	0,0,1,0
E:empty	匹配一個不包含任何子元素的元素,注意,文本借點也被看做子元素	3	0,0,1,0

反選僞類

選擇器	含義	CSS版本	優先級
E:not(selector)	匹配非當前選擇起的任何元素	3	0,0,0,0

target僞類

選擇器	含義	CSS版本	優先級
E:target	匹配文檔中特定"id"點擊後的效果	3	0,0,1,0

僞元素

選擇器	含義	CSS版本	優先級
E:first-line	匹配E元素的第一行	2	0,0,0,1
E:first-letter	匹配E元素的第一個字母	2	0,0,0,1
E:before	在E元素以前插入生成的內容	2	0,0,0,1
E:after	在E元素以後插入生成的內容	2	0,0,0,1
E::selection	匹配用戶當前選中的元素	3	0,0,0,1
E::placeholder	控制表單輸入框佔位符的外觀,瀏覽器暫時不支持	3	0,0,0,1

Selectors Level 4

暫略

Selectors Level 4
Selectors Level 4草案
CSS4 Rocks

CSS選擇器,優先級與匹配原理

瀏覽器經過優先級來判斷哪一些屬性應該應用到一個元素上.優先級就是分配給指定的CSS聲明的一個權重,它由匹配的選擇器中的每個選擇器類型的值來決定.

選擇器的權重(特殊性)升序排列:

• 繼承

• 通用元素

• 標籤|僞元素

• 類|屬性|僞類

• ID

• 內聯樣式

• !important

全部的選擇器權重都是經過相加計算,大的優先;若是權重同樣大,後定義的優先.

此外,優先級還要考慮到CSS樣式的來源,樣式表可能有三種不一樣的來源:做者,用戶和客戶端,按升序排列:

• 客戶端聲明(UA declarations)

• 通常用戶聲明(user normal declarations)

• 通常做者聲明( author normal declarations )

• 加了 '!important' 的做者聲明( author important declarations )

• 加了 '!important' 的用戶聲明( user important declarations )

當擁有相同重要性和來源,按照CSS特殊性來排序.引用的樣式表(@import )中的規則被認爲出如今樣式表自己的全部規則以前,在@charset以後

<style>
        @charset "UTF-8";
        @import url("userContent.css");
        p {
            color: green !important;
        }
  </style>

!important

使用!important能夠覆蓋任何其它沒有使用!important的規則,在IE6時代!important多用來hack,不過如今不建議使用,除非須要在外部css文件中提高優先級

一些Demo

:not反轉僞類

:notDemo

這裏明顯能夠看出,:not不參與權重計算

基於形式的優先級

選擇器的形式

因而可知,屬性選擇器裏面的選擇器不參與權重計算,它的權重只是屬性選擇器的權重

關於後代元素選擇器

後代元素選擇器

對於後代元素選擇器來講,祖先選擇器跟每一個後代元素的距離都是同樣的.在這個例子中,因爲優先級同樣,因此後面的.red p覆蓋前面的.green p

覆蓋以前:

1.顏色是? 綠色
2.顏色是? 紅色
3.顏色是? 紅色
4.顏色是? 綠色

覆蓋以後:

1.顏色是? 紅色
2.顏色是? 紅色
3.顏色是? 紅色
4.顏色是? 綠色

相關參考:
優先級
KB005: CSS 層疊