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

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

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

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

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 只对一点内容都没有的元素生效, 哪怕有一个空格都不行.

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对应

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: