一天一點css 2 選擇符文法

標籤：round   pad   UI   中間   ack   :hover   nbsp   span   port   

css用於控制元素樣式，css文法為 選擇符{屬性：值}方式進行設定

1 類型選擇符

就是將標籤作為選擇符，如body div h1 span等

2 群組選擇符

如 h1,h2h3{padding:5px;}中間使用,分隔字元，由多個選擇符組成，表示這一組選擇符均採用一致樣式

3 包含選擇符

包含主要用於父級內部字集節點的設定，就像xpath路徑一樣，文法為選擇符之間使用 空格作為分隔字元

如 h1 span{font-weight:bold} 意思是h1內部所有span節點使用字型加粗樣式

4 id和class選擇符

這個很簡單了

5 組合選擇符

與群組選擇符差不多，將多個選擇符進行組合，選擇符之間平級關係則為群組，使用 逗號 分隔字元，內含項目關聯性 則使用 空格選擇符

6 偽類和偽對象

這幾個玩意兒是固定的，不能進行自訂的主兒

偽類：

:link 表示a標籤在未被訪問之前的樣式

:hover 表示滑鼠移動到元素上的樣式

:active 表示被點擊和被釋放之間的樣式

:visited 表示被訪問後的樣式

:focus 表示擷取到焦點時候樣式

：first-child 表示元素第一個子節點樣式

：first 表示頁面第一頁使用的樣式

 

偽對象 （第一個和最後一個用得較多，常用來做一些進階ui互動）

：after 表示標籤後面的內容

：first-letter 標籤內的第一個字元樣式

：first-line 標籤內第一行樣式設定

：before 標籤之前的內容

 

7 通配選擇符

* 符號，即所有對象的共同點

 

8 優先順序

常規來說：id選擇符>類選擇符>標籤選擇符，在某些時候可以使用！important來提升同集當中樣式的優先順序 如 div{ background-color:red ,background-color:blue;}

一般是後面覆蓋前面，但是加上!important之後則得到提升：div{ background-color:red !important,background-color:blue;}最終div呈現為紅色

 

而優先順序的通用演算法：誰近誰高，即誰離被應用該樣式的元素近則優先順序高

 

一天一點css 2 選擇符文法