第2章 CSS3选择器-1

W3C在CSS3的工作草案中把选择器独立出来成为一个模块。实际上，选择器是CSS只是中的重要部分之一，也是CSS的根基。利用CSS选择器能不改动HTML结构，通过添加不同的CSS规则得到不同的样式的结果。

要使用某个样式用于特定的HTML元素，首先需要找到该元素。在CSS中，执行这一任务的表现规则称为CSS选择器。它为获取目标元素之后施加样式提供了极大的灵活性。

CSS3选择器在常规选择器的基础上新增了属性选择器、伪类选择器、过滤选择器。可以帮助您在开发中减少对HTML类名或ID名的依赖，以及对HTML元素的结构依赖，使编写代码更加简单轻松。如果学习过jQuery选择器，学习CSS3选择器会更容易，因为CSS3选择器在某些方面和jQuery选择器是完全一样的，唯一遗憾的是部分旧版本浏览器并不支持CSS3选择器。

根据所获取页面中元素的不同，把CSS3选择器分为五大类：基本选择器、层次选择器、伪类选择器、伪元素和属性选择器。其中，伪类选择器又分为六种：动态伪类选择器、目标伪类选择器、语言未来、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器。如下图所示。

下面分别介绍着10种选择器

基本选择器是CSS种使用最频繁、最基础，也是CSS种最早定义的选择器。这部分选择器在CSS1中就定义了，为了更便于初学者温故而知新，不妨回顾CSS的基础选择器。

通过基本选择器可以确定HTML树形结构中大多数的DOM元素节点。详细说明如下所示：

基本选择器均可使用。

    
    
    
        *{margin: 0;padding: 0}        .clearfix:after,.clearfix:before{display: table;content: '';}        .clearfix:after{clear: both;overflow: hidden;}        .demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}        li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background-color: #f36;color: green;margin-right: 5px;}    
    
        1
        2
        3
        4
        5
        
6
        
7
        
8
        
9
        10
    

2.2.3效果图

通配选择器（*）用来选择所有元素。当然也可以选择某个元素下的所有元素。如：

*{margin: 0;padding: 0;}

上面一行代码大家在Reset样式文件中经常看到，表示所有元素的margin和padding都设置为0。为了更好的说明问题，通过CSS3选择器中的通配选择器来改变列表中所有子项的北京色设置为orange

*{margin: 0;padding: 0}.clearfix:after,.clearfix:before{display: table;content: '';}.clearfix:after{clear: both;overflow: hidden;}.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background-color: #f36;color: green;margin-right: 5px;}.demo *{background: orange;}    

如下图所示：

2.2.4效果图

元素选择（E)是CSS选择器中最常见、最基本的选择器。文档的元素包括html、body、div、p、div等，示例中ul、li也属于HTML元素。

*{margin: 0;padding: 0}.clearfix:after,.clearfix:before{display: table;content: '';}.clearfix:after{clear: both;overflow: hidden;}.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;}.demo *{background: orange;}ul{background: grey;}   

2.2.5 效果图

在使用ID选择器(#id)之前，需要在HTML文档中给对应的元素设置id属性并设置其值，才能找到对应的元素。ID选择器具有唯一性，在一个页面中不会同事出现id相同的属性值。在CSS样式中使用id选择器时，需要在id属性值的前面加上"#"号，如（#id）。

*{margin: 0;padding: 0}.clearfix:after,.clearfix:before{display: table;content: '';}.clearfix:after{clear: both;overflow: hidden;}.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;}.demo *{background: orange;}ul{background: grey;}#first{background: lime;color: #000;}   #last{background: #000;color: lime;}    

2.2.6 效果图

类选择器(.class)是以独立于文档元素的方式来制定元素样式。使用方法与ID选择器及其相似，所限在HTML 给需要的元素定义class属性，并为其设置属性值。其与ID选择器有一个很大不同之处。类选择器在一个页面中可以有多个相同的类名，而ID选择器其ID值在整个页面中是唯一的一个。

*{margin: 0;padding: 0}.clearfix:after,.clearfix:before{display: table;content: '';}.clearfix:after{clear: both;overflow: hidden;}.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;}.demo *{background: orange;}ul{background: grey;}#first{background: lime;color: #000;}#last{background: #000;color: lime;}.item{background: green;color: #fff;font-weight: bold;} 

2.2.6 效果图

多类选择器用法：通过两个或两个以上类选择器合并，来定义有区别于一个类名的元素效果。

*{margin: 0;padding: 0}.clearfix:after,.clearfix:before{display: table;content: '';}.clearfix:after{clear: both;overflow: hidden;}.demo{width: 250px;border: 1px solid #ccc;padding: 10px;margin: 20px auto;}li{list-style: none;float: left;height: 20px;line-height: 20px;width: 20px;border-radius: 10px;text-align: center;background: #f36;color: green;margin-right: 5px;}.demo *{background: orange;}ul{background: grey;}#first{background: lime;color: #000;}#last{background: #000;color: lime;}.item{background: green;color: #fff;font-weight: bold;}.item.important{background: red;}   

IE6选择器并不支持多类名选择器，并将以末尾类名为准。

多类选择器用法效果图

群组选择器（selector1,selectorN）是将具有相同样式的元素分组在一起，每个选择器之间用逗号（,）隔开，例如：“selector1,selector2,...,selectorN”。这个逗号告诉浏览器，规则中包含多个不同的选择器，省去逗号就变成了后代选择器，这一点大家在使用中千万要小心。

作者：白小虫
链接：https://www.jianshu.com/p/3594e7e8b158