选择器

    
    

    

    	css示例
        html示例
        描述
    

    

    	*{}
         
        选择所有标签
    

    

    	id属性选择
         
         
    

    

    	#a{}
        <div id="a"></div>
        
选择所有id="a"的标签
注：id 属性中只允许一个值

    

    

    	class属性选择
         
         
    

    

    	.a{}
        <div class="a"></div>
        
选择所有class="a"的标签
注：class 属性中允许多个值，用空格分开

    

    

    	.a.b{}
        <div class="a b"></div>
        
选择所有class中同时有a、b的标签
注：2个值中间没有空格

    

    

    	标签名选择
         
         
    

    

    	div{}
        <div></div>
        选择所有div标签
    

    

    	多个标签选择
         
         
    

    

    	#a,#b{}
        
<div id="a"></div>
<div id="b"></div>

        
选择所有id为 a、b 的标签
注：可以混合使用id属性、class属性、标签名

    

    

    	同层相邻选择
         
         
    

    

    	div+p
        
<div></div>
<p>选择的是这个</p>
<p></p>

        
选择div紧挨的p元素
注：可以混合使用id属性、class属性、标签名

    

    

    	div~p
        
<div></div>
<p>选中</p>
<p>选中</p>

        
选择div下的的所有同层p标签
注：可以混合使用id属性、class属性、标签名

    

    

    	子标签选择
         
         
    

    

    	#a .c{}
        
<div id="a">
  <span class="c"></span> 
</div>

        
选择所有id="a"下所有class="c"的标签
注：可以混合使用id属性、class属性、标签名

    

    

    	div>a{}
        
<div>
<a href="#"></a>
</div>

        
选择所有div下的所有a标签
注：
1.a标签必须是div的直接子标签
2.可以混合使用id属性、class属性、标签名

    

    

    	指定属性选择
         
         
    

    

    	div[name]{}
        
<div name="ab">选中</div>
<div name="cd">选中</div>

        
选择所有带name属性的div标签
注：属性可以指定其它，如id、class、target等

    

    

    	div[name="ab"]{}
        
<div name="ab">选中</div>
<div name="cd"></div>

        
选择所有name="ab"的div标签
注：属性可以指定其它，如id、class、target等

    

    

    	div[name~="ab"]{}
        
<div name="ab mm">选中</div>
<div name="cd mm"></div>

        
选择所有name包含单词ab的div标签
注：
1.属性可以指定其它，如class、target等
2.必须是单词，空格分开
3.id属性不允许空格，不适用

    

    

    	div[name^="ab"]{}
        
<div name="ab123">选中</div>
<div name="cd123"></div>

        
选择所有name以ab开头的div标签
注：属性可以指定其它，如id、class、target等

    

    

    	div[name$="cd"]{}
        
<div name="abcd">选中</div>
<div name="abcd123"></div>

        
选择所有name以cd结尾的div标签
注：属性可以指定其它，如id、class、href等

    

    

    	div[name*="abc"]{}
        
<div name="divabc123">选中</div>
<div name="divabc">选中</div>

        
选择所有name中包含abc的div标签
注：属性可以指定其它，如id、class、href等

    

    

    	伪类选择
         
         
    

    

    	
a:link{}
a:visited{}
a:hover{}
a:active{}

        
link  未访问链接
visited  已访问链接
hover  鼠标悬浮
active  激活链接（点击过的）

        
<a>标签动作伪类
注：
1.hover可以运用到其它标签
2.hover必须在link、visited之后

    

    

    	input:focus{}
        <input type="text" />
        获得焦点的标签（文本框点击后）
    

    

    	p:first-child{}
        
<body>
  <p>选中</p>
  <p></p>
  <div>
    <p>选中</p>
    <p></p>
  </div>
</body>

        所有标签中包含的第一个p标签