CSS3中有哪些常用的选择器

这篇文章给大家介绍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. <h3><a href="#test">test</a></h3>   

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. <h3><a href="#pipi">pipi</a></h3>   

32. <div id="pipi">   

33.     content for pipi   

34. </div>   

35.   

36. <h3><a href="#ruby">ruby</a></h3>   

37. <div id="ruby">   

38.     content for ruby   

39. </div>   

40.   

41. <h3><a href="#aaron">Brand</a></h3>   

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>&radic;</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>&radic;</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>  

关于CSS3中有哪些常用的选择器就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。