首页 > 代码库 > 【前端开发系列】—— CSS3属性选择器总结
【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS，作为一个开发过前端的人员来说，调试一个图片花了半天的时间，最后发现分隔符用错了，实在是一件很丢人的事情。因此，痛下决心来学习CSS，最近一周也会更新下相关的学习笔记。
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>
正常范围时
超出范围时
【前端开发系列】—— CSS3属性选择器总结