【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学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：链接指定的目标

 <html>
 <head>
     <style type="text/css">
         :target{
             background-color:yellow;
         }
     </style>
 </head>
 <body>
     <p id="menu">
         <a href="#text1">示例1</a>|
         <a href="#text2">示例2</a>|
         <a href="#text3">示例3</a>|
         <a href="#text4">示例4</a>|
         <a href="#text5">示例5</a>
     </p>
     <div id="text1">
         <h2>示例文字1</h2>
         <p>..此处省略..</p>
     </div>
     <div id="text2">
         <h2>示例文字2</h2>
         <p>..此处省略..</p>
     </div>
     <div id="text3">
         <h2>示例文字3</h2>
         <p>..此处省略..</p>
     </div>
     <div id="text4">
         <h2>示例文字4</h2>
         <p>..此处省略..</p>
     </div>
     <div id="text5">
         <h2>示例文字5</h2>
         <p>..此处省略..</p>
     </div>
 </body>
 </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：选择时，触发

 <html>
 <head>
     <style type="text/css">
         p::selection{
             background:red;
             color:#FFF;
         }
         input[type="text"]::selection{
             background:gray;
             color:#FFF;
         }
         td::selection{
             background:green;
             color:#FFF;
         }
     </style>
 </head>
 <body>
     <p>hello!xingoo</p>
     <hr/>
     <input type="text" value="hello!xingoo" />
     <hr/>
     <table border="1" cellspacing="0" cellpadding="0" >
         <tr>
             <td>
                 hello!
             </td>
             <td>
                 xingoo!
             </td>
         </tr>
         <tr>
             <td>
                 123!
             </td>
             <td>
                 456!
             </td>
         </tr>
     </table>
 </body>
 </html>

　　default：比如多选框，页面刷新时，默认选择触发

　　indeterminate：比如多选框，都没选时的样式

 <html>
 <head>
     <script>
         function radio_onchange()
         {
 
             var radio = document.getElementById("radio1");
             var text = document.getElementById("text1");
             console.log(text.disabled);
             if(radio.checked){
                 console.log("checked");
                 text.disabled = "";
             }else{
                 console.log("unchecked");
                 text.value = "";
                 text.disabled = "disabled";
             }
         }
     </script>
     <style type="text/css">
         input[type="text"]:enabled{
             background-color:yellow;
         }
         input[type="text"]:disabled{
             background-color:purple;
         }
         input[type="text"]:hover{
             background-color:skyblue;
         }
         input[type="text"]:focus{
             background-color:red;
         }
         input[type="text"]:read-only{
             background-color:gray;
         }
 
         input[type="checkbox"]:checked{
             outline:2px solid blue;
         }
 
         input[type="checkbox"]:indeterminate{
             outline:2px solid red;
         }
     </style>
 </head>
 <body>
     <form>
         <input type="radio" id="radio1" name="radio" onchange="radio_onchange();">可用</radio>
         <input type="radio" id="radio2" name="radio" onchange="radio_onchange();">不可用</radio><br/>
         <input type=text id="text1" disabled />
         <p>
             姓名：<input type="text" name="name" /><br/>
             Email：<input type="text" name="email" value="http://www.cnblogs.com/xing901022/" readonly="readonly" />
         </p>
 
         兴趣：<input type="checkbox">阅读</input>
         <input type="checkbox">电影</input>
         <input type="checkbox">游戏</input>
         <input type="checkbox">上网</input>
         <br/>
 
     </form>
 </body>
 </html>

　　invalid：不符合元素范围的

　　valid：符合元素范围校验的

 <html>
 <head>
     <style type="text/css">
         input[type="text"]:invalid{
             background-color:red;
         }
         input[type="text"]:valid{
             background-color:white;
         }
     </style>
 </head>
 <body>
     <form>
         <p>必须输入文字:<input type="text" required /></p>
     </form>
 </body>
 </html>

不合法时

合法时

　　required：支持这个属性，并且定义了required的

　　optional：支持requried属性，但是没有定义的

 <html>
 <head>
     <style type="text/css">
         input[type="text"]:required{
             border-color:red;
             border-width:3px;
         }
         input[type="text"]:optional{
             border-color:blue;
             border-width:3px;
         }
     </style>
 </head>
 <body>
     <form>
         姓名：<input type="text" required placeholder="必须输入" /><br/>
         年龄：<input type="text" />
     </form>
 </body>
 </html>

　　in-range：在范围内的

　　out-of-range：超出范围的

 <html>
     <head>
         <style type="text/css">
             input[type="number"]:in-range{
                 background-color:white;
             }
             input[type="number"]:out-of-range{
                 background-color:red;
             }
         </style>
     </head>
     <body>
         test number 1-100<input type=number min=0 max=100>
     </body>
 </html>

正常范围时

超出范围时