這篇文章主要介紹了css3選擇器基本介紹,需要的朋友可以參考下

這些選擇器還是比較簡單的,就不再此一一舉例樣式了.還有隨著各種瀏覽器的升級,也不在此討論各種版本的瀏覽器對于屬性樣式的兼容和支持問題久了.

一:屬性選擇器

[attr=val]:屬性attr是val;

[attr*=val]:屬性attr中包含val;

[attr^=val]:屬性attr中開頭是val;

[attr$=val]:屬性attr結尾是val;

二:偽類選擇器

:first-line,為某個元素中的第一行文字使用樣式.

:first-letter,為某個元素中的文字的首字母(歐美文字)或第一個字(中文或日文等漢字)使用樣式.

:before,在某個元素之前插入一些內容.

例如:.gys:before{content:'思思博士';}

:after,在某個元素之后插入內容.

:root,有效文本區域,即html區域

例子::root{ background:'red';}

body{ background:"yellow";}

這個時候整個頁面背景就會變成黃色,而文本區域的背景色就是紅色.

:not,排除不需要的子元素

例如:body *:not(h1){ color:red;}//body中所有的子元素,當時排除h1元素

:empty,當元素內容為空白是使用的樣式.

:target,跳轉到這個鏈接后,執行樣式.

例如:

111111111111

222222222222222

1111111111111111

222222222222

#test1:target{ background-color:#000;}//跳轉到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){color:red;}

li:nth-child{4n+2}{ color:bluee;}

li:nth-child(4n+3){color:yellow;}

li:nth-child(4n+4){color:black;}

:only-child,當父元素中只有一個子元素時使用.

例如:li:only-child{ color:red;}

三,表單偽類選擇器

:active元素被激活(鼠標放下還沒有抬起)

:focus獲得焦點時,

:hover,鼠標懸浮在元素上

例如:input[type='text']:active{ color:#F00;}

input[type='text']:focus{ color:#F00; background-color:#960;}

input[type='text']:hover{ color:#0F0;}

:enabled,元素處于可用狀態,

:disabled,元素處于不可用狀態

:read-only,元素處于只讀狀態

:read-write,元素處于非只讀狀態

:checked,表單中radio或checkbox復選框處于選取狀態時的樣式

:default,當頁面打開時默認處于選取狀態的單選框或復選框的樣式.

:indeterminate,用來指定頁面打開時,如果一組單選框中任何一個單選框都沒有設定選取狀態時整租單選框的樣式,如果用戶選取其中任何一個單選框,這該樣式被取消指定.目前只用opera支持.

:selection,但元素處于選中狀態時的樣子.

更加詳細的教程可參考：CSS3.0中文參考手冊