css3之選取器，css3選取器

css3之選取器，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,跳轉到這個連結後,執行樣式.
例如:
<a href="#test1">111111111111</a>
<a href="#test2">222222222222222</a>
<div id="test1">1111111111111111</div>
<div id="test2">222222222222</div>

#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新增的選取器

@media (min-width: 992px)
允許 瀏覽器可視範圍 最小大小 為 992px，當 瀏覽器可視範圍的大小 ≥ 992px 時， .container 的最大寬度 為 970px，
即，無論 瀏覽器放到多大，只要它不少於 992px ，.container 的寬度始終為 970px。

當 瀏覽器可視範圍 小於 992px 時，.container 中的設定無效。

這裡.container 中，應該還有設定一個預設的值。

再舉例：
@media(max-width:1000px){ .container{ max-width:970px; }}同理，這裡的 @media{max-width:1000px} 就是 允許 瀏覽器最大寬度 為 1000px，時它小於 1000px 時，.container 中的 值才會生效，反即失效。

也就是說：
@media{} 中的值，是 允許條件 ，當這條件成立時，它中的內容才會生效。

詳細翻譯即為：

如果瀏覽器的 寬度 小於或等於 1000px 時（註：理解好最大寬度為啥意思，最小寬度 即為 大於或等於這個值），.container 中的最大寬度為 970px，無論瀏覽器被縮到多少，.container 的寬度始終為 970px，但是當 大於 1000px 時，.container 中的值就為無效。

@media 中也可以寫個固定寬度值，如：
@media(wdith:1000px){ .container{ width:970px }}瀏覽器寬度等於 1000px 時，.container 寬度即為 970px ，顯然，這絕對等於的值，設定起來無意義的。

以上~
自測得出的結果……

 
不明白html 5 的CSS3選取器中的:first-child與:last-child是幹什用的？

:first-child和:last-child
用來選擇某個元素的第一個子項目。
//輸入ul li:first-child
//輸入ul li:last-child
剛剛有個這方面的視頻，視頻的系列名稱叫做 《Buid New World》 裡面的第八集是講CSS3 選取器的，有機會看看吧