想想自己為什么要學CSS，作為一個開發過前端的人員來說，調試一個圖片花了半天的時間，最后發現分隔符用錯了，實在是一件很丟人的事情。因此，痛下決心來學習CSS，最近一周也會更新下相關的學習筆記。
CSS3中使用了很多的屬性選擇器，通過這些屬性選擇器，可以根據我們自己的設計來定義元素的樣式，制作精美的網頁。
CSS3屬性選擇器
下面是CSS3的屬性選擇器的語法，及使用。
元素名字[元素類型=“類型名字”]：選擇器名字{ 屬性：值； 屬性：值； }
在元素類型匹配時，就可以使用類似正則的匹配方法。
[att=val] 指定特定名字的元素
[att*=val] 匹配val*的元素，
[att^=val] 匹配val開頭的元素，比如id為val1、val432432都可以。
[att$=val] 匹配val結尾的元素，比如id為1213val、fdajlval等等。
偽元素選擇器
通常，CSS中會有一些已經定義好的元素選擇器，我們通過
選擇器:偽元素{屬性名：值}
來定義。
常用的偽選擇器有：
1 first-line 偽元素選擇器：某個元素的第一行
2 first-letter：某元素的首字母
3 after：某元素之后插入內容，如
<p>:before{ content:123 }
4 before：某元素之前插入內容
常用選擇器
root：整個DOM的元素定點，也就是html
not：排除特定的元素
empty：比如一個列表空的那個元素
target：鏈接指定的目標
1 <html> 2 <head> 3 <style type="text/css"> 4 :target{ 5 background-color:yellow; 6 } 7 </style> 8 </head> 9 <body> 10 <p id="menu"> 11 <a href="#text1">示例1</a>| 12 <a href="#text2">示例2</a>| 13 <a href="#text3">示例3</a>| 14 <a href="#text4">示例4</a>| 15 <a href="#text5">示例5</a> 16 </p> 17 <div id="text1"> 18 <h2>示例文字1</h2> 19 <p>..此處省略..</p> 20 </div> 21 <div id="text2"> 22 <h2>示例文字2</h2> 23 <p>..此處省略..</p> 24 </div> 25 <div id="text3"> 26 <h2>示例文字3</h2> 27 <p>..此處省略..</p> 28 </div> 29 <div id="text4"> 30 <h2>示例文字4</h2> 31 <p>..此處省略..</p> 32 </div> 33 <div id="text5"> 34 <h2>示例文字5</h2> 35 <p>..此處省略..</p> 36 </div> 37 </body> 38 </html>
點擊圖片就可以看到效果
first-child：選擇第一個子元素
last-child：選擇最后一個子元素
nth-child：選擇第n個子元素，這個還可以根據奇偶來制定，比如：
<子元素>：nth-child(even){ ... } <子元素>：nth-child(odd){ ... }//也可以通過在括號內使用2n+1來，指定奇偶
nth-last-child：選擇倒數第n個子元素
only-child：單個子元素時，指定樣式
元素狀態選擇器
hover：當鼠標浮在元素上方時，觸發
active：當鼠標按下，還沒有離開時，觸發。因為chrome不支持，所以沒有進行測試。
focus：編輯焦點時，觸發
enabled：可以使用時，觸發
disabled：不可以使用時，觸發
read-only：只讀時，觸發
read-write：可讀可寫時，觸發
checked：被勾選觸發
selection：選擇時，觸發
1 <html> 2 <head> 3 <style type="text/css"> 4 p::selection{ 5 background:red; 6 color:#FFF; 7 } 8 input[type="text"]::selection{ 9 background:gray; 10 color:#FFF; 11 } 12 td::selection{ 13 background:green; 14 color:#FFF; 15 } 16 </style> 17 </head> 18 <body> 19 <p>hello!xingoo</p> 20 <hr/> 21 <input type="text" value="hello!xingoo" /> 22 <hr/> 23 <table border="1" cellspacing="0" cellpadding="0" > 24 <tr> 25 <td> 26 hello! 27 </td> 28 <td> 29 xingoo! 30 </td> 31 </tr> 32 <tr> 33 <td> 34 123! 35 </td> 36 <td> 37 456! 38 </td> 39 </tr> 40 </table> 41 </body> 42 </html>
default：比如多選框，頁面刷新時，默認選擇觸發
indeterminate：比如多選框，都沒選時的樣式
1 <html> 2 <head> 3 <script> 4 function radio_onchange() 5 { 6 7 var radio = document.getElementById("radio1"); 8 var text = document.getElementById("text1"); 9 console.log(text.disabled); 10 if(radio.checked){ 11 console.log("checked"); 12 text.disabled = ""; 13 }else{ 14 console.log("unchecked"); 15 text.value = ""; 16 text.disabled = "disabled"; 17 } 18 } 19 </script> 20 <style type="text/css"> 21 input[type="text"]:enabled{ 22 background-color:yellow; 23 } 24 input[type="text"]:disabled{ 25 background-color:purple; 26 } 27 input[type="text"]:hover{ 28 background-color:skyblue; 29 } 30 input[type="text"]:focus{ 31 background-color:red; 32 } 33 input[type="text"]:read-only{ 34 background-color:gray; 35 } 36 37 input[type="checkbox"]:checked{ 38 outline:2px solid blue; 39 } 40 41 input[type="checkbox"]:indeterminate{ 42 outline:2px solid red; 43 } 44 </style> 45 </head> 46 <body> 47 <form> 48 <input type="radio" id="radio1" name="radio" onchange="radio_onchange();">可用</radio> 49 <input type="radio" id="radio2" name="radio" onchange="radio_onchange();">不可用</radio><br/> 50 <input type=text id="text1" disabled /> 51 <p> 52 姓名：<input type="text" name="name" /><br/> 53 Email：<input type="text" name="email" value="http://www.cnblogs.com/xing901022/" readonly="readonly" /> 54 </p> 55 56 興趣：<input type="checkbox">閱讀</input> 57 <input type="checkbox">電影</input> 58 <input type="checkbox">游戲</input> 59 <input type="checkbox">上網</input> 60 <br/> 61 62 63 </form> 64 </body> 65 </html>
invalid：不符合元素范圍的
valid：符合元素范圍校驗的
1 <html> 2 <head> 3 <style type="text/css"> 4 input[type="text"]:invalid{ 5 background-color:red; 6 } 7 input[type="text"]:valid{ 8 background-color:white; 9 } 10 </style> 11 </head> 12 <body> 13 <form> 14 <p>必須輸入文字:<input type="text" required /></p> 15 </form> 16 </body> 17 </html>
不合法時
合法時
required：支持這個屬性，並且定義了required的
optional：支持requried屬性，但是沒有定義的
1 <html> 2 <head> 3 <style type="text/css"> 4 input[type="text"]:required{ 5 border-color:red; 6 border-width:3px; 7 } 8 input[type="text"]:optional{ 9 border-color:blue; 10 border-width:3px; 11 } 12 </style> 13 </head> 14 <body> 15 <form> 16 姓名：<input type="text" required placeholder="必須輸入" /><br/> 17 年齡：<input type="text" /> 18 </form> 19 </body> 20 </html>
in-range：在范圍內的
out-of-range：超出范圍的
1 <html> 2 <head> 3 <style type="text/css"> 4 input[type="number"]:in-range{ 5 background-color:white; 6 } 7 input[type="number"]:out-of-range{ 8 background-color:red; 9 } 10 </style> 11 </head> 12 <body> 13 test number 1-100<input type=number min=0 max=100> 14 </body> 15 </html>
正常范圍時
超出范圍時
