這些選擇器還是比較簡單的,就不再此一一舉例樣式了.還有隨著各種瀏覽器的公升級,也不在此討論各種版本的瀏覽器對於屬性樣式的相容和支援問題久了.
一:屬性選擇器
[attr=val]:屬性attr是val;
[attr*=val]:屬性attr中包含val;
[attr^=val]:屬性attr中開頭是val;
[attr$=val]:屬性attr結尾是val;
二:偽類選擇器
:first-line,為某個元素中的第一行文字使用樣式.
:first-letter,為某個元素中的文字的首字母(歐美文字)或第乙個字(中文或日文等漢字)使用樣式.
:before,在某個元素之前插入一些內容.
例如:.gys:before
:after,在某個元素之後插入內容.
:root,有效文字區域,即html區域
例子::root
body
這個時候整個頁面背景就會變成黃色,而文字區域的背景色就是紅色.
:not,排除不需要的子元素
例如:body *:not(h1) //body中所有的子元素,當時排除h1元素
:empty,當元素內容為空白是使用的樣式.
:target,跳轉到這個鏈結後,執行樣式.
例如:111111111111
222222222222222
1111111111111111
222222222222
#test1:target//跳轉到id=test1時背景色變化
:first-child,第乙個子元素
:last-child,最後乙個子元素
:nth-child(n),指定父元素中第n的子元素.n如果是odd偶數序列的子元素,even技術序列的子元素
:nth-last-child(n),指定父元素中倒數第n的子元素,n如果是odd偶數序列的子元素,even基數序列的子元素
:nth-of-type(n),指定同型別中的指定n.
:nth-of-last-type(n),指定同型別中的倒數第n的元素.
:nth-child(an+i),迴圈使用樣式.
例如:li:nth-child(4n+1)
li:nth-child
li:nth-child(4n+3)
li:nth-child(4n+4)
:only-child,當父元素中只有乙個子元素時使用.
例如:li:only-child
三,表單偽類選擇器
:active元素被啟用(滑鼠放下還沒有抬起)
:focus獲得焦點時,
:hover,滑鼠懸浮在元素上
例如:input[type='text']:active
input[type='text']:focus
input[type='text']:hover
:enabled,元素處於可用狀態,
:disabled,元素處於不可用狀態
:read-only,元素處於唯讀狀態
:read-write,元素處於非唯讀狀態
:checked,表單中radio或checkbox核取方塊處於選取狀態時的樣式
:default,當頁面開啟時預設處於選取狀態的單選框或核取方塊的樣式.
:indeterminate,用來指定頁面開啟時,如果一組單選框中任何乙個單選框都沒有設定選取狀態時整租單選框的樣式,如果使用者選取其中任何乙個單選框,這該樣式被取消指定.目前只用opera支援.
:selection,但元素處於選中狀態時的樣子.
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...
css3之各種選擇器
css3中新增的選擇器可以簡便許多樣式。此次用了屬性選擇器，root,not,empty,target,first child，last child,ntn child n ntn last child n first of type,nth of type n last of type,nth l...