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

时间 2019-11-19

原文原文链接

想一想本身为何要学CSS，做为一个开发过前端的人员来讲，调试一个图片花了半天的时间，最后发现分隔符用错了，实在是一件很丢人的事情。所以，痛下决心来学习CSS，最近一周也会更新下相关的学习笔记。css

　　CSS3中使用了不少的属性选择器，经过这些属性选择器，能够根据咱们本身的设计来定义元素的样式，制做精美的网页。html

　　下面是CSS3的属性选择器的语法，及使用。

元素名字[元素类型=“类型名字”]：选择器名字{ 属性：值； 属性：值； }

　　在元素类型匹配时，就可使用相似正则的匹配方法。前端

　　[att=val] 指定特定名字的元素chrome

　　[att*=val] 匹配val*的元素，ide

　　[att^=val] 匹配val开头的元素，好比id为val一、val432432均可以。学习

　　[att$=val] 匹配val结尾的元素，好比id为1213val、fdajlval等等。测试

　　伪元素选择器

　　一般，CSS中会有一些已经定义好的元素选择器，咱们经过ui

选择器:伪元素{属性名：值}

　　来定义。spa

　　经常使用的伪选择器有：设计

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>

View Code

点击图片就能够看到效果

　　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>

View Code

　　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>

View Code

　　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>

View Code

不合法时

合法时

　　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>

View Code

　　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>

View Code

正常范围时

超出范围时