CSS 選擇器

查詢文檔

CSS3選擇器規範地址

CSS3選擇最新選擇器規範

樣式表的組成

• 選擇器 + 聲明塊

• 選擇器 從右往左 解析

基本選擇器

/*通配符選擇器*/		* {}
/*元素選擇器*/		body {}
/*類選擇器*/		.list {}
/*ID選擇器*/		#list {}
複製代碼

關係選擇器

/*後代選擇器*/		.list li {}
				會選中全部符合條件的後代，包括兒子，孫子，孫子的孫子...
/*子元素選擇器*/		#wrap > .inner {}
				也可稱爲直接後代選擇器,此類選擇器只能匹配到直接後代，不能匹配到深層次的後代元素
/*相鄰兄弟選擇器*/	#wrap #first + .inner {}
				它只會匹配緊跟着的兄弟元素
/*通用兄弟選擇器*/	#wrap #first ~ div {}
				它會匹配全部的兄弟元素(不須要緊跟)
/*選擇器分組*/		h1,h2,h3{}  
				逗號，稱之爲結合符
	
複製代碼

屬性選擇器

/*存在和值屬性選擇器*/	
	[attr]：該選擇器選擇包含 attr 屬性的全部元素，不論 attr 的值爲什麼。
	[attr=val]：該選擇器僅選擇 attr 屬性被賦值爲 val 的全部元素。
	[attr~=val]：表示帶有以 attr 命名的屬性的元素，而且該屬性是一個以空格做爲分隔的值列表，其中至少一個值爲val。
	
/*子串值屬性選擇器*/
	 [attr|=val] : 選擇attr屬性的值是val（包括val）或以val-開頭的元素。
	 [attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素。
	 [attr$=val] : 選擇attr屬性的值以val結尾（包括val）的元素。
	 [attr*=val] : 選擇attr屬性的值中包含字符串val的元素。
複製代碼

僞類與僞元素選擇器

連接僞類

E:link		表示做爲超連接，並指向一個未訪問的地址的全部錨
E:visited	表示做爲超連接，並指向一個已訪問的地址的全部錨
E:target 	表明一個特殊的元素，它的id是URI的片斷標識符
複製代碼

動態僞類

注意:hover，:active基本能夠做用於全部的元素！

E:hover     表示懸浮到元素上
E:active    表示匹配被用戶激活的元素（點擊按住時）
複製代碼

順序爲:link，:visited，:hover，:active(因爲a標籤的:link和:visited能夠覆蓋了全部a標籤的狀態)

• :visited選擇器：只有下列的屬性才能被應用到已訪問連接：
  • color
  • background-color
  • border-color

表單相關僞類

E:enabled	匹配可編輯的表單
E:disable	匹配被禁用的表單
E:checked	匹配被選中的表單
E:focus		匹配獲焦的表單
複製代碼

結構性僞類

#wrap E:nth-child(index) //匹配wrap中的第index的子元素,這個子元素必須是E
#wrap E:nth-of-type(index) //匹配wrap中同類型的第index個的E元素
複製代碼

• index的值從1開始計數！！！！
• index能夠爲變量n(只能是n)或者公式

:nth-child(length) /*參數是具體數字 length爲整數*/
:nth-child(n) /*參數是n,n從0開始計算*/
:nth-child(n*length) /*n的倍數選擇，n從0開始算*/
:nth-child(n*length+1) /*表示隔幾選一*/
:nth-child(2n) / :nth-child(even) /*表示偶數*/
:nth-child(2n+1) / :nth-child(odd) /*表示奇數*/
複製代碼

• :nth-child和:nth-of-type有一個很重要的區別！！
  • nth-of-type以元素爲中心！！！

:nth-child(index)系列			
	E:first-child            匹配父元素的第一個子元素E
	E:last-child             匹配父元素的最後一個子元素E
	E:nth-last-child(index)  匹配父元素的倒數第n個子元素E
	E:only-child	         匹配父元素僅有的一個子元素E
:nth-of-type(index)系列
	E:first-of-type         匹配同類型中的第一個同級兄弟元素E
	E:last-of-type          匹配同類型中的最後一個同級兄弟元素E
	E:nth-last-type(index)  匹配同類型中的倒數第n個同級兄弟元素E
	E:only-of-type          匹配同類型中的惟一的一個同級兄弟元素E
複製代碼

:not

假定有個列表，每一個列表項都有一條底邊線，可是最後一項不須要底邊線。

li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
複製代碼

:empty

區分空元素

:empty(內容必須是空的，有空格都不行，有attr不要緊)
複製代碼

選擇不包含子元素的div元素：

div:empty
複製代碼

僞元素選擇器

E::after   //在目標元素E的前面插入的內容。用來和content屬性一塊兒使用
E::before   //在目標元素E的後面插入的內容。用來和content屬性一塊兒使用
E::firstLetter  //設置元素內的第一個字符的樣式
E::firstLine  //設置元素內的第一行的樣式
E::selection  //設置元素被選擇時的字體顏色和背景顏色EE::placeholder //設置元素文字佔位符的樣式。(通常用於input輸入框)
複製代碼

::placeholder在使用時須要加上各個瀏覽器的前綴；除了Firefox是 ::[prefix]placeholder，其餘瀏覽器都是使用 ::[prefix]input-placeholder。

css聲明的優先級

!important > 行內樣式 > #id > .class/僞類/屬性> tag > * > 繼承 > 默認

• 選擇器的特殊性

內聯聲明              1,0,0,0 
    ID屬性值              0,1,0,0
    類屬性/屬性/僞類      0,0,1,0
    元素/僞元素           0,0,0,1
    通配符選擇器          0,0,0,0
    結合符對選擇器特殊性沒有一點貢獻
    繼承沒有特殊性
複製代碼

• 重要聲明

  • !important 老是要放在聲明的最後，即分號的前面

• 來源

css樣式的來源大體有三種
	  創做人員
	  讀者
	  用戶代理   
複製代碼

• 權重

讀者的重要聲明
創做人員的重要聲明
創做人員的正常聲明
讀者的正常聲明
用戶代理的聲明
複製代碼

• 層疊

1.找出全部相關的規則，這些規則都包含一個選擇器
		    2.計算聲明的優先級
		               先按來源排序
		               在按選擇器的特殊性排序
		               最終按順序
複製代碼