CSS個人筆記 選擇器

CSS個人筆記

選擇器

标簽選擇器

标簽選擇器又叫元素選擇器，換句話說，文檔的元素就是最基本的選擇器，使用元素名稱直接選中元素即可。

例如

<style>
	p{
		height:100px;
		border:1px solid red;
	}
	
</style>

<p>one</p>
<p>two</p>
<p>three</p>
           

類選擇器（ Class selectors ）

類選擇器以點"."開頭，後面緊跟一個類名。類名不允許有空格，與元素中class屬性的值保持一緻。一個元素可以有多個class的值，每個值通過空格分割開。類名相同的元素屬于一類元素。

例如：

<style>	 		
		.first{font-weight: bold;}		 	
		.done {text-decoration: line-through;}	 	
	</style>
	<ul>		
		<li class="first done">Create an HTML document</li>
		<li class="second done">Create a CSS style sheet</li>
		<li class="third done">Link them all together</li>		
	</ul>


           

ID選擇器（ID selectors）

ID選擇器以"#"開頭，後面緊跟一個ID名，在一個文檔中，ID值不能重複，是以在選擇文檔中唯一進制素的時候該選擇器比較有用。

例如：

<style>			
		#polite {	  font-family: cursive;}			
		#rude {	font-family: monospace;text-transform: uppercase;}
	</style>
	
	<p id="polite"> — "Good morning."</p>		
	<p id="rude"> — "Go away!"</p>

           

普遍選擇器（Universal selector）

使用"*”來表示普遍選擇器，表示選擇所有元素，通常用在組合選擇器中。

例如：

<style>			
		.left-nav>* { width:200px; background-color:#fafafa}
	</style>
	
	<article class="left-nav">
		<span></span>
		<dl>				
		    <dt>推薦</dt>				
		    <dd class="current"><i class="icon-music"></i>發現音樂</dd>		</dl>			
		<dl>				
		    <dt>我的音樂</dt>							    <dd><i class="icon-cloud-download"></i>下載下傳的音</dd>			</dl>
	</article>

           

層次選擇器

• 後代選擇器（ descendant selector ） 使用 “ ” 隔開兩個選擇器。

  例如 “ul li”表示選擇ul的後代元素li，li可以為ul的直接子元素，也可以為ul的孫子元素。

• 子代選擇器（child selector） 使用 “>” 隔開兩個選擇器。

  例如 “ul>li”表示選擇ul的直接子代元素li,ul的孫子元素li無法被選擇到。

• 相鄰同胞選擇器（adjacent sibling selector） 下一個兄弟元素 使用 “+” 隔開兩個選擇器。

  例如 ".one+*"表示選擇class為"one"元素的下一個兄弟元素。

• 一般同胞選擇器（ general sibling selector） 之後所有的兄弟元素 使用 “~” 隔開兩個選擇器。

  例如 ".one~*"表示選擇class為"one"元素之後的所有兄弟元素。

多選擇器

• 組合選擇器 多個選擇器組合使用，使用“,”分割。

  例如 “div,.one,#tt”

  表示選擇div元素，class為one的元素以及id為tt的元素

• 嵌套選擇器 多個選擇器嵌套使用。

  例如 “div.one” 表示class為one的div元素。

屬性選擇器

• [attr] 選擇具有attr屬性的元素、無論該屬性的值是什麼
• [attr=val] 選擇具有attr屬性的、并且attr的值為val元素
• [attr^=val] 選擇具有attr屬性的、并且attr的值以val開頭的元素
• [attr$=val] 選擇具有attr屬性的、并且attr的值以val結尾的元素
• [attr*=val] 選擇具有attr屬性的、并且attr的值包含val的元素
• [attr~=val] 選擇具有attr屬性的、并且attr的值之一為val的元素

僞類選擇器

僞類以":"開頭，用在選擇器後，用于指明元素在某種特殊的狀态下才能被選中。

子代元素相關的僞類選擇器

• :only-child 選中獨生子元素
• :first-child 選中作為别人第一個孩子的元素
• :last-child 選中作為别人最後一個孩子的元素
• :nth-child(n) 選中作為别人第幾個孩子元素的元素
• :nth-last-child(n) 選中作為别人倒數第幾個孩子的元素
• :first-of-type 選中作為别人每種類型中的第一個孩子的元素
• :last-of-type 選中作為别人每種類型中的最後一個孩子的元素
• :nth-of-type(n) 選中作為别人每種類型中的第幾個孩子的元素
• :nth-last-of-type(n) 選中作為别人每種類型中的倒數第幾個孩子的元素
• 上面的n可以為元素的序号，也可以為特殊的字元，比如odd，even，n從1開始

元素狀态相關僞類選擇器

• :link 未被通路的狀态，a标簽
• :visited 已通路過的狀态，a标簽
• :hover 滑鼠懸停的狀态，a标簽，其他标簽也可用
• :active 活動的狀态， a标簽，其他标簽也可用
• :focus 聚焦的狀态
• :checked 使用者選中的單選按鈕和複選按鈕
• :default 預設選中的單選按鈕和複選按鈕
• :enabled、 :disabled 可用的表單控件、禁用的表單控件
• :valid 、:invalid 通過驗證的、不通過驗證的
• :required、:optional 必填的和選填的
• :in-range 、:out-of-range 在範圍内的、在範圍外的

僞元素選擇器

僞元素以"::"開頭，用在選擇器後，用于選擇指定的元素。
           

• ::after 選中之後的不存在的節點，可配合content屬性進行内容填充
• ::before 選中之前的不存在的節點，可配合content屬性進行内容填充
• ::first-letter 選中第一個文本字元
• ::first-line 選中第一行文本
• ::selection 選中使用者在選擇的時候的文本

級聯(The cascade)

從表層來看，級聯表明CSS規則的順序問題，但是級聯遠比這個複雜，在所有的選擇器中某個選擇器定義的規則是否能夠勝出（即優先級）取決于三個元素：Importance，Specificity，Source order

!important聲明(Importance)

在css規則的值末尾添加"!important"能夠保證該規則優先其他規則。但是一般建議不使用"!important",因為它會改變級聯的工作方式，使得調試變得困難。

<style>
		#winning {background-color: red; border: 1px solid black;}
		.better {	 background-color: gray; border: none !important;}
	</style>
	<p class="better">This is a paragraph.</p>		
	<p class="better" id="winning">One selector to rule them all!</p>

           

特性值 (Specificity)

1000

如果聲明是在style 屬性中該列加1分（這樣的聲明沒有選擇器，是以它們的專用性總是1000。）否則為0。

100

在整個選擇器中每包含一個ID選擇器就在該列中加1分。

10

在整個選擇器中每包含一個類選擇器、屬性選擇器、或者僞類就在該列中加1分。

1

在整個選擇器中每包含一個元素選擇器或僞元素就在該列中加1分。

其他不加分

代碼順序 (Source order)

如果多個競争選擇器具有相同的重要性和特性值，代碼順序就發揮作用了，後來規則優先前面規則。

采取就近原則。

繼承（Inheritance）

CSS中有些規則将會預設被子元素繼承，有些則不會。

可繼承屬性：font系列屬性、文本系列屬性、清單系列屬性、cursor、visibility等

不可繼承屬性：margin、padding、border等

CSS提供了三個特殊的值用來處理繼承

• inherit 繼承父元素的樣式
• initial 不繼承。應用浏覽器的預設樣式
• unset 不設定，表現該規則本來特性，即如果該規則具有繼承屬性則繼承，否則不繼承。