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

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

CSS Code复制内容到剪贴板

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

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

CSS Code复制内容到剪贴板

1.   
2. input:not([type="submit"]) {   
3.     border: 1px solid red;   
4. }   
5.   
6.   
7.   

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

CSS Code复制内容到剪贴板

1.   
2. div:empty {   
3.     border: 1px solid green;   
4. }   
5.   
6.   
7. 我这里有内容   
8.     
9.   

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

CSS Code复制内容到剪贴板

1.   
2. .not_show{   
3.     display: none;   
4. }   
5.   
6. #test:target{   
7.     display:block;   
8. }   
9.   
10.   
11.   
12. "#test">test   
13. "not_show" id="test">   
14.     这是一个测试   
15.   
16.   
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.   
30.   
31. "#pipi">pipi   
32. "pipi">   
33.     content for pipi   
34.   
35.   
36. "#ruby">ruby   
37. "ruby">   
38.     content for ruby   
39.   
40.   
41. "#aaron">Brand   
42. "aaron">   
43.     content for aaron   
44.   

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

CSS Code复制内容到剪贴板

1.   
2. ul li:first-child a {   
3.     color:green;   
4. }   
5.   
6. ul li:last-child a {   
7.     color:red;   
8. }   
9.   
10.   
11.   
    •   
    • "##">link1
      
    •   
    • "##">link2
      
    •   
    • "##">link3
      
    •   
    • "##">link4
      
    •   
    • "##">link5
      
      

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

CSS Code复制内容到剪贴板

1.   
2.       
3.     ul li:nth-child(2n) {   
4.         color:green;   
5.     }   
6.   
7.       
8.   
9.       
10.     ul li:nth-child(2n+1) {   
11.         color:red;   
12.     }   
13.   
14.       
15.   
16.       
17.     ul li:nth-child(5) {   
18.         background: #08c;   
19.     }   
20.   
21.       
22.     ul li:nth-last-child(5){   
23.         background: yellow;   
24.     }   
25.   
26.   
    •     
    • item1
      
    •     
    • item2
      
    •     
    • item3
      
    •     
    • item4
      
    •     
    • item5
      
    •     
    • item6
      
    •     
    • item7
      
    •     
    • item8
      
    •     
    • item9
      
    •     
    • item10
      
      

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

CSS Code复制内容到剪贴板

1.   
2.     .wrapper > p:first-of-type {   
3.         background: green;   
4.     }   
5.   
6.     .wrapper > p:last-of-type {   
7.         background: orange;   
8.     }   
9.   
10.   
11. "wrapper">   
12.     我是一个块元素，我是.wrapper的第一个子元素   
13.     

    我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素

      
14.     

    我是一个段落元素

      
15.     我是一个块元素   
16.   

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

CSS Code复制内容到剪贴板

1.   
2.     .wrapper > p:nth-of-type(2n){   
3.         background: orange;   
4.     }   
5.   
6.   
7. "wrapper">   
8.     我是一个Div元素   
9.     

   我是一个段落元素

     
10.   
11.     我是一个Div元素   
12.     

    我是一个段落

      
13.   
14.     我是一个Div元素   
15.     

    我是一个段落

      
16.   
17.     我是一个Div元素   
18.     

    我是一个段落

      
19.   
20.     我是一个Div元素   
21.     

    我是一个段落

      
22.   
23.     我是一个Div元素   
24.     

    我是一个段落

      
25.   
26.     我是一个Div元素   
27.     

    我是一个段落

      
28.   
29.     我是一个Div元素   
30.     

    我是一个段落

      
31.   

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

CSS Code复制内容到剪贴板

1.   
2.     .post p:only-child {   
3.       background: orange;   
4.     }   
5.   
6.   
7. "post">   
8.     

   我是一个段落

     
9.     

   我是一个段落

     
10.   
11. "post">   
12.     

    我是一个段落

      
13.   

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

CSS Code复制内容到剪贴板

1.   
2.     .wrapper > div:only-of-type {   
3.         background: orange;   
4.     }   
5.   
6.   
7. "wrapper">   
8.     

   我是一个段落

     
9.     

   我是一个段落

     
10.     

    我是一个段落

      
11.     我是一个Div元素   
12.   
13. "wrapper">   
14.     我是一个Div   
15.     
      
    •         
    • 我是一个列表项
      
    •     
      
16.     

    我是一个段落

      
17.   

11. 可用选择器 :enabled

CSS Code复制内容到剪贴板

1.   
2.     div{   
3.         margin: 20px;   
4.     }   
5.     input[type="text"]:enabled {   
6.         background: #ccc;   
7.         border: 2px solid red;   
8.     }   
9.   
10.   
11.   

12. 不可用选择器 :disabled

CSS Code复制内容到剪贴板

1.   
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.   
23.   

13. 被选中选择器 :checked

CSS Code复制内容到剪贴板

1.   
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.   
50.   
51.   

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

CSS Code复制内容到剪贴板

1.   
2. ::-moz-selection {   
3.     background: red;   
4.     color: green;   
5. }   
6. ::selection {   
7.     background: red;   
8.     color: green;   
9. }   
10.   

11. 拿鼠标选中我, 试试看!

      

15. 只读选择器 :read-only

CSS Code复制内容到剪贴板

1.   
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.   
27.   

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

CSS Code复制内容到剪贴板

1.   
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.   
33.   
34.