1、认识css选择器 要使某个样式应用于特定的html元素，首先需要找到元素。在css中，执行这一任务的表现规则称为css选择器
1、1 css3选择器的优势 css3新增了属性选择器，伪类选择器、过滤选择器。可以帮助您在开发中减少对html的类名或id名的依赖，以及对html元素的结构依赖，使编写代码更加简单轻松。
1、2 css3选择器分类 基本选择器 层次选择器 伪类选择器 伪元素 属性选择器 伪类选择器又分为六种：动态伪类选择器、目标伪类选择器、语言伪类选择器、ui元素状态伪类选择器、结构伪类选择器、否定伪类选择器。
2、基本选择器 2、1基本选择器的语法 选择器 类型 功能描述
* 通配选择器 选择文档中所有的html元素
e 元素选择器 选择指定的类型的html元素
#id id选择器 选择指定id属性值为“id”的任意类型元素
.class 类选择器 选择指定class属性值为“class”的任意类型的任意多元素
selector1，selectorn 群组选择器 将每一个选择器匹配的元素合并
实战体验
使用css3基本选择器 1 2 2 4 5 6 7 8 9 10
页面初始效果
2、2通配选择器 通配选择器（*）用来选择所有元素
*{margin:0;padding:0} //此代码在reset的样式文件中经常见到，表示所有元素的margin和padding都设置为0
代码示例
*{margin:0; padding: 0;} .clearfix:after,.clearfix:before{display: table;content:} .clearfix:after{clear: both;overflow: hidden} .demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; margin-right: 5px;} .demo * {background:orange} //使元素类名为demo下的所有元素都将背景色设置为橙色
通配选择器使用效果
2、3 元素选择器 元素选择器是css中最基本的选择器，接下来通过ul选择器改变整个列表的背景色
*{margin:0; padding: 0;} .clearfix:after,.clearfix:before{display: table;content:} .clearfix:after{clear: both;overflow: hidden} .demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; margin-right: 5px;} .demo * {background:orange}ul{background:grey}//列表ul的背景色将变成灰色
元素选择器使用效果
2、4 id选择器 在使用id选择器（#id）之前，需要在html文档中给对应的元素设置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 #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; margin-right: 5px;} .demo * {background:orange}ul{background:grey}#first {background:lime;color:#000}#last {background:#000;color:lime}
id选择器使用效果
2、5 类选择器 类选择器（.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 #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; 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;}//列表3同时具有important和item类名，所以才会执行代码
多类名选择器使用效果
2、6群组选择器 群组选择器（selector1,selectorn）是将具有相同样式的元素分组在一起，每个选择器之间用（，）隔开。