CSS3中的常用选择器使用示例整理

1. 根选择器 :root
:root{}就等同于html{}, 一般来说, 推荐使用:root{}.

CSS Code复制内容到剪贴板

1. <style>   
2. :root {   
3.   background:green;   
4. }   
5. </style>   
6.   
7. <div>:root选择器的演示</div>  

2. 否定选择器 :not
否定选择器, 就是除此之外的

CSS Code复制内容到剪贴板

1. <style>   
2. input:not([type="submit"]) {   
3.     border: 1px solid red;   
4. }   
5. </style>   
6.   
7. <form action="#">   
8.     <div>   
9.         <label for="name">账号:</label>   
10.         <input type="text" name="name" id="name" placeholder="请填写账号" />   
11.     </div>   
12.     <div>   
13.         <label for="password">密码:</label>   
14.         <input type="password" name="password" id="password" placeholder="请填写密码" />   
15.     </div>   
16.     <div>   
17.         <input type="submit" value="Submit" />   
18.     </div>   
19. </form>   

3. 空选择器 :empty
注意: :empty 只对一点内容都没有的元素生效, 哪怕有一个空格都不行.

CSS Code复制内容到剪贴板

1. <style>   
2. div:empty {   
3.     border: 1px solid green;   
4. }   
5. </style>   
6.   
7. <div>我这里有内容</div>   
8. <div> <!-- 我这里有一个空格 --></div>   
9. <div></div><!-- 我这里任何内容都没有 -->  

4.目标选择器 :target
超链接地址, 与id对应

CSS Code复制内容到剪贴板

1. <style>   
2. .not_show{   
3.     display: none;   
4. }   
5.   
6. #test:target{   
7.     display:block;   
8. }   
9. </style>   
10.   
11.   
12. <h2><a href="#test">test</a></h2>   
13. <div class="not_show" id="test">   
14.     这是一个测试   
15. </div>   
16. <style>   
17.     #pipi:target {   
18.       background: orange;   
19.       color: #fff;   
20.     }   
21.     #ruby:target {   
22.       background: blue;   
23.       color: #fff;   
24.     }   
25.     #aaron:target {   
26.       background: red;   
27.       color: #fff;   
28.     }   
29. </style>   
30.   
31. <h2><a href="#pipi">pipi</a></h2>   
32. <div id="pipi">   
33.     content for pipi   
34. </div>   
35.   
36. <h2><a href="#ruby">ruby</a></h2>   
37. <div id="ruby">   
38.     content for ruby   
39. </div>   
40.   
41. <h2><a href="#aaron">Brand</a></h2>   
42. <div id="aaron">   
43.     content for aaron   
44. </div>  

5. 第一个与最后一个子元素 :first-child :last-child

CSS Code复制内容到剪贴板

1. <style>   
2. ul li:first-child a {   
3.     color:green;   
4. }   
5.   
6. ul li:last-child a {   
7.     color:red;   
8. }   
9.   
10. </style>   
11. <ul>   
12.   <li><a href="##">Link1</a></li>   
13.   <li><a href="##">Link2</a></li>   
14.   <li><a href="##">Link3</a></li>   
15.   <li><a href="##">Link4</a></li>   
16.   <li><a href="##">Link5</a></li>   
17. </ul>  

6. 指定子元素选择器/奇偶选择器 :nth-child(n) :nth-last-child(n)

CSS Code复制内容到剪贴板

1. <style>   
2.     /*2n 偶数*/  
3.     ul li:nth-child(2n) {   
4.         color:green;   
5.     }   
6.   
7.     /* 用关键词 odd, 表示偶数, 效果同上  
8.     ul li:nth-child(odd) {  
9.         color:green;  
10.     }  
11.     */  
12.   
13.     /*2n+1 奇数*/  
14.     ul li:nth-child(2n+1) {   
15.         color:red;   
16.     }   
17.   
18.     /* 用关键词 even, 表示奇数, 效果同上  
19.     ul li:nth-child(even) {  
20.         color:red;  
21.     }  
22.     */  
23.   
24.     /* 指定子元素索引 */  
25.     ul li:nth-child(5) {   
26.         background: #08c;   
27.     }   
28.   
29.     /* 倒数第五个 */  
30.     ul li:nth-last-child(5){   
31.         background: yellow;   
32.     }   
33. </style>   
34. <ul>   
35.     <li>item1</li>   
36.     <li>item2</li>   
37.     <li>item3</li>   
38.     <li>item4</li>   
39.     <li>item5</li>   
40.     <li>item6</li>   
41.     <li>item7</li>   
42.     <li>item8</li>   
43.     <li>item9</li>   
44.     <li>item10</li>   
45. </ul>  

7. 第一个与最后一个匹配类型的子元素 first-of-type last-of-type

CSS Code复制内容到剪贴板

1. <style>   
2.     .wrapper > p:first-of-type {   
3.         background: green;   
4.     }   
5.   
6.     .wrapper > p:last-of-type {   
7.         background: orange;   
8.     }   
9. </style>   
10.   
11. <div class="wrapper">   
12.     <div>我是一个块元素，我是.wrapper的第一个子元素</div>   
13.     <p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>   
14.     <p>我是一个段落元素</p>   
15.     <div>我是一个块元素</div>   
16. </div>  

8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)

CSS Code复制内容到剪贴板

1. <style>   
2.     .wrapper > p:nth-of-type(2n){   
3.         background: orange;   
4.     }   
5. </style>   
6.   
7. <div class="wrapper">   
8.     <div>我是一个Div元素</div>   
9.     <p>我是一个段落元素</p>   
10.   
11.     <div>我是一个Div元素</div>   
12.     <p>我是一个段落</p>   
13.   
14.     <div>我是一个Div元素</div>   
15.     <p>我是一个段落</p>   
16.   
17.     <div>我是一个Div元素</div>   
18.     <p>我是一个段落</p>   
19.   
20.     <div>我是一个Div元素</div>   
21.     <p>我是一个段落</p>   
22.   
23.     <div>我是一个Div元素</div>   
24.     <p>我是一个段落</p>   
25.   
26.     <div>我是一个Div元素</div>   
27.     <p>我是一个段落</p>   
28.   
29.     <div>我是一个Div元素</div>   
30.     <p>我是一个段落</p>   
31. </div>  

9. 唯一子元素选择器 only-child
匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素

CSS Code复制内容到剪贴板

1. <style>   
2.     .post p:only-child {   
3.       background: orange;   
4.     }   
5. </style>   
6.   
7. <div class="post">   
8.     <p>我是一个段落</p>   
9.     <p>我是一个段落</p>   
10. </div>   
11. <div class="post">   
12.     <p>我是一个段落</p>   
13. </div>  

10. 唯一匹配类型的子元素 only-of-type

CSS Code复制内容到剪贴板

1. <style>   
2.     .wrapper > div:only-of-type {   
3.         background: orange;   
4.     }   
5. </style>   
6.   
7. <div class="wrapper">   
8.     <p>我是一个段落</p>   
9.     <p>我是一个段落</p>   
10.     <p>我是一个段落</p>   
11.     <div>我是一个Div元素</div>   
12. </div>   
13. <div class="wrapper">   
14.     <div>我是一个Div</div>   
15.     <ul>   
16.         <li>我是一个列表项</li>   
17.     </ul>   
18.     <p>我是一个段落</p>   
19. </div>  

11. 可用选择器 :enabled

CSS Code复制内容到剪贴板

1. <style>   
2.     div{   
3.         margin: 20px;   
4.     }   
5.     input[type="text"]:enabled {   
6.         background: #ccc;   
7.         border: 2px solid red;   
8.     }   
9. </style>   
10.   
11. <form action="#">   
12.     <div>   
13.         <label for="name">Text Input:</label>   
14.         <input type="text" name="name" id="name" placeholder="可用输入框"  />   
15.     </div>   
16.     <div>   
17.         <label for="name">Text Input:</label>   
18.         <input type="text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />   
19.     </div>   
20. </form>  

12. 不可用选择器 :disabled

CSS Code复制内容到剪贴板

1. <style>   
2. form {   
3.     margin: 50px;   
4. }   
5.   
6. div {   
7.     margin-bottom: 20px;   
8. }   
9.   
10. input {   
11.     background: #fff;   
12.     padding: 10px;   
13.     border: 1px solid orange;   
14.     border-radius: 3px;   
15. }   
16.   
17. input[type="text"]:disabled {   
18.     background: rgba(0,0,0,.15);   
19.     border: 1px solid rgba(0,0,0,.15);   
20.     color: rgba(0,0,0,.15);   
21. }   
22. </style>   
23. <form action="#">   
24.     <div>   
25.         <input type="text" name="name" id="name" placeholder="我是可用输入框" />   
26.     </div>   
27.     <div>   
28.         <input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled />   
29.     </div>   
30. </form>  

13. 被选中选择器 :checked

CSS Code复制内容到剪贴板

1. <style>   
2.     form {   
3.       border: 1px solid #ccc;   
4.       padding: 20px;   
5.       width: 300px;   
6.       margin: 30px auto;   
7.     }   
8.   
9.     .wrapper {   
10.       margin-bottom: 10px;   
11.     }   
12.   
13.     .box {   
14.       display: inline-block;   
15.       width: 20px;   
16.       height: 20px;   
17.       margin-right: 10px;   
18.       position: relative;   
19.       border: 2px solid orange;   
20.       vertical-align: middle;   
21.     }   
22.   
23.     .box input {   
24.       opacity: 0;   
25.       positon: absolute;   
26.       top:0;   
27.       left:0;   
28.     }   
29.   
30.     .box span {   
31.       position: absolute;   
32.       top: -10px;   
33.       rightright: 3px;   
34.       font-size: 30px;   
35.       font-weight: bold;   
36.       font-family: Arial;   
37.       -webkit-transform: rotate(30deg);   
38.       transform: rotate(30deg);   
39.       color: orange;   
40.     }   
41.   
42.     input[type="checkbox"] + span {   
43.       opacity: 0;   
44.     }   
45.   
46.     input[type="checkbox"]:checked + span {   
47.       opacity: 1;   
48.     }   
49. </style>   
50.   
51. <form action="#">   
52.     <div class="wrapper">   
53.         <div class="box">   
54.           <input type="checkbox" checked="checked" id="usename" /><span>√</span>   
55.         </div>   
56.         <lable for="usename">我是选中状态</lable>   
57.     </div>   
58.   
59.     <div class="wrapper">   
60.         <div class="box">   
61.           <input type="checkbox"  id="usepwd" /><span>√</span>   
62.         </div>   
63.         <label for="usepwd">我是未选中状态</label>   
64.     </div>   
65. </form>  

14. 被鼠标选中, 高亮选择器 ::selection

CSS Code复制内容到剪贴板

1. <style>   
2. ::-moz-selection {   
3.     background: red;   
4.     color: green;   
5. }   
6. ::selection {   
7.     background: red;   
8.     color: green;   
9. }   
10. </style>   
11. <p>拿鼠标选中我, 试试看!</p>  

15. 只读选择器 :read-only

CSS Code复制内容到剪贴板

1. <style>   
2. form {   
3.     width: 300px;   
4.     padding: 10px;   
5.     border: 1px solid #ccc;   
6.     margin: 50px auto;   
7. }   
8. form > div {   
9.     margin-bottom: 10px;   
10. }   
11.   
12. input[type="text"]{   
13.     border: 1px solid orange;   
14.     padding: 5px;   
15.     background: #fff;   
16.     border-radius: 5px;   
17. }   
18.   
19. input[type="text"]:-moz-read-only{   
20.     border-color: #ccc;   
21. }   
22. input[type="text"]:read-only{   
23.     border-color: #ccc;   
24. }   
25. </style>   
26.   
27. <form action="#">   
28.     <div>   
29.         <label for="name">姓名:</label>   
30.         <input type="text" name="name" id="name" placeholder="大漠" />   
31.     </div>   
32.     <div>   
33.         <label for="address">地址:</label>   
34.         <input type="text" name="address" id="address" value="中国上海" readonly />   
35.     </div>   
36. </form>  

16. 非只读选择器 :read-write

CSS Code复制内容到剪贴板

1. <style>   
2. form {   
3.     width: 300px;   
4.     padding: 10px;   
5.     border: 1px solid #ccc;   
6.     margin: 50px auto;   
7. }   
8. form > div {   
9.     margin-bottom: 10px;   
10. }   
11.   
12. input[type="text"]{   
13.     border: 1px solid orange;   
14.     padding: 5px;   
15.     background: #fff;   
16.     border-radius: 5px;   
17. }   
18.   
19. input[type="text"]:-moz-read-only{   
20.     border-color: #ccc;   
21. }   
22. input[type="text"]:read-only{   
23.     border-color: #ccc;   
24. }   
25.   
26. input[type="text"]:-moz-read-write{   
27.     border-color: #f36;   
28. }   
29. input[type="text"]:read-write{   
30.     border-color: #f36;   
31. }   
32. </style>   
33.   
34. <form action="#">   
35.     <div>   
36.         <label for="name">姓名:</label>   
37.         <input type="text" name="name" id="name" placeholder="大漠" />   
38.     </div>   
39.     <div>   
40.         <label for="address">地址:</label>   
41.         <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />   
42.     </div>   
43. </form>