CSS选择器

目录

四种基本选择器

后代选择器

 交集选择器

 css3的一些选择器

---

四种基本选择器

• 标签选择器

/*
    标签选择器选择的是某类标签，、
    如：div span ul li ...
*/
div {
    backround-colr: red;
}

• ID选择器 特定标签，有且只有一个

/*
    定义在标签上的ID属性值，在整个html页面中是唯一的，用“#”号表示
    如：
    我是文本
*/

#my_text {
    font-size: 14px
}

• 类选择器 将标签归类，统一设置

/*
    类选择器选择的是再标签中定义的“class”属性，可以对需要使用的标签进行统一样式管理
    如：
        
我是文本
        /*
    通用选择器，通过通配符“*”的方式使用，能匹配所有的标签
*/
* {
    matgin: 0px;
}

后代选择器

当在开发时，需要将某个标签下的某种标签统一设置样式，就可以使用后代标签，并且不需要一定是子代，孙代、曾孙代都可，即只要是该标签的后代，都能适用。直接上例子：

    
    




    子代
    

        孙代
    
    

        

            曾孙代
        
    

 交集选择器

交集选择器如：div.my_text。意思是必须是div标签，并且该div定义了类："my_text"，才能命中。如果标签中定义的是ID的话，书写形式为：div#id。上例子：

    
    



是并集选择器的内容
不是并集选择器的内容
是并集选择器的内容
不是并集选择器的内容

 css3的一些选择器

• 子代选择器（IE7开始兼容）

子代选择器，只能选择子代的内容，与后代选择器不一样，后代选择器只要是被包裹切命中的内容，都会被选择。它们的书写形式也不一样，上例子：

    
    




    子代
    

        孙代
    
    子代

 

• 序选择器（IE7开始兼容）

可以通过序号选择对应内容，也可以通过一些方式，如选择第一个、选择最后一个等，选择对应的内容警醒设置，上例子：

    
    




    
我是第一个
    
我是第二个
    
我是第三个
    
我是第四个
    
我是第五个
    
我是第六个
    
我是第七个
    
我是第后一个