我的進階--css3 第一章 選取器

標籤：tle   visit   tor   empty   焦點   link   nbsp   節點   內容   

css選取器　　屬性選取器

　　　　E[attr]：只使用屬性名稱，但沒有確定任何屬性值；
　　　　E[attr="value"]：指定屬性名稱，並指定了該屬性的屬性值；
　　　　E[attr~="value"]：指定屬性名稱，並且具有屬性值，此屬性值是一個詞列表，並且以空格隔　開，其中詞列表中包含了一個value詞，而且等號前面的“~”不能不寫；
　　　　E[attr^="value"]：指定了屬性名稱，並且有屬性值，屬性值是以value開頭的；
　　　　E[attr$="value"]：指定了屬性名稱，並且有屬性值，而且屬性值是以value結束的；
　　　　E[attr*="value"]：指定了屬性名稱，並且有屬性值，而且屬值中包含了value；
　　　　E[attr|="value"]：指定了屬性名稱，並且屬性值是value或者以“value-”開頭的值（比如說zh-cn）;

　　　　注意：以上標紅的選取器的屬性值必須是獨立的單詞。例如 [title~=test] 中 test a可以被選中testa不能被選中．  

　　偽類別選取器

　　　　:link 偽類向未訪問的連結添加特殊的樣式。
　　　　:visited 偽類向已訪問的連結添加特殊的樣式。
　　　　:hover 偽類在滑鼠移到元素上時向此元素添加特殊的樣式。
　　　　:active 偽類向啟用（在滑鼠點擊與釋放之間發生的事件）的元素添加特殊的樣式。

　　　　注意：這四個如果同時使用，則需要注意應用的順序！   

　　結構性偽類別選取器

　　　　:root選取器用匹配文檔的根項目。
　　　　:not(selector) 選取器匹配非指定元素/選取器的每個元素。
　　　　:empty 選取器匹配沒有子項目（包括文本節點）的每個元素。
　　　　:target 選取器可用於選取當前活動的目標元素。
　　　　　　URL 帶有後面跟有錨名稱 #，指向文檔內某個具體的元素。這個被 連結的元素就是目標元素(target element)。

　　　　:first-child 選取器用於選取屬於其父元素的首個子項目的指定選取器。
　　　　:last-child 選取器匹配屬於其父元素的最後一個子項目的每個元素。
　　　　:only-child 選取器匹配屬於其父元素的唯一子項目的每個元素。

　　　　E:nth-child(n) 選取器匹配屬於其父元素的第n個子項目，並且這個元素還得是E元素；
　　　　E:nth-last-child(n) 選取器匹配屬於其元素的第n個子項目的每個元素，並且這個元素還得是E元素，從最後一個子項目開始計數。

:　　　　nth-of-type(n) 選取器匹配屬於父元素的特定類型的第 N 個子項目的每個元素.
　　　　:nth-last-of-type(n) 選取器匹配屬於父元素的特定類型的第 N 個子項目的每個元素，從最後一個子項目開始計數

　　UI元素狀態偽類別選取器(表單專用)

　　　　:focus 選取器用於選取獲得焦點的元素。
　　　　:enabled選取器被用來指定當元素處於可用狀態時的樣式。
　　　　:disabled選取器被用來指定當元素處於不可用狀態時的樣式。

　　　　:read-only選取器被用來指定當元素處於唯讀狀態時的樣式。
　　　　:read-write 選取器用於匹配可讀及可寫的元素。

　　　　:checked偽類別選取器用來指定當表單中的radio單選框或者是checkbox複選框處於選取狀態時的樣式。
　　　　:default選取器用來指定當頁面開啟時預設處於選取狀態的單選框或複選框的控制項的樣式。
　　　　:indeterminate選取器用來指定當頁面開啟時，一組單選框中沒有任何一個單選框被設定為選中狀態時，整組單選框的樣式。

　　　　::selection偽類別選取器用來指定當元素處於選中狀態時的樣式。

　　虛擬元素選取器

　　　　:first-line 選取器用於選取指定選取器的首行。
　　　　:first-letter:為某個元素中的文字的首字母或第一個字使用樣式；
　　　　:before:在某個元素之前插入一些內容；(請使用 content 屬性來指定要插入的內容。)
　　　　:after: 在某個元素之後插入一些內容；(請使用 content 屬性來指定要插入的內容。)
　　　　Content 屬性：需要與上面倆個配合使用！   

謹記當初奮鬥的自己,是他讓現在的自己,享受美好,                                           敬給還在奮鬥的你們,望與君共勉.

 

我的進階--css3 第一章 選取器