第2章 CSS3选择器
W3C在CSS3的工作草案中把选择器独立出来成为一个模块。实际上，选择器是CSS只是中的重要部分之一，也是CSS的根基。利用CSS选择器能不改动HTML结构，通过添加不同的CSS规则得到不同的样式的结果。
2.1 认识CSS选择器
要使用某个样式用于特定的HTML元素，首先需要找到该元素。在CSS中，执行这一任务的表现规则称为CSS选择器。它为获取目标元素之后施加样式提供了极大的灵活性。
2.1.1 CSS3选择器的优势
CSS3选择器在常规选择器的基础上新增了属性选择器、伪类选择器、过滤选择器。可以帮助您在开发中减少对HTML类名或ID名的依赖，以及对HTML元素的结构依赖，使编写代码更加简单轻松。如果学习过jQuery选择器，学习CSS3选择器会更容易，因为CSS3选择器在某些方面和jQuery选择器是完全一样的，唯一遗憾的是部分旧版本浏览器并不支持CSS3选择器。
2.1.2 CSS3选择器分类
根据所获取页面中元素的不同，把CSS3选择器分为五大类：基本选择器、层次选择器、伪类选择器、伪元素和属性选择器。其中，伪类选择器又分为六种：动态伪类选择器、目标伪类选择器、语言未来、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器。如下图所示。
下面分别介绍着10种选择器
2.2 基本选择器
基本选择器是CSS种使用最频繁、最基础，也是CSS种最早定义的选择器。这部分选择器在CSS1中就定义了，为了更便于初学者温故而知新，不妨回顾CSS的基础选择器。
2.2.1 基本选择器语法
通过基本选择器可以确定HTML树形结构中大多数的DOM元素节点。详细说明如下所示：
| 选择器 | 类型 | 功能描述 |
|---|---|---|
* | 通配选择器 | 选择文档中所有的HTML元素 |
E | 元素选择器 | 选择制定的类型的HTML元素 |
#id | ID选择器 | 选择制定ID属性值为“id”的任意类型元素 |
.class | 类选择器 | 选择之类 class 属性为“class”的任意类型的任意多个元素 |
sleector1,selectorN | 群组选择器 | 将每一个选择器匹配的元素集合并 |
2.2.2 浏览器兼容性
基本选择器均可使用。
2.2.3 实战体验 ： 使用基本选择器
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>使用CSS3基本选择器</title>
<style>
*{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;} </style></head><body>
<ul class="demo clearfix">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="last" id="last">10</li>
</ul></body></html>
2.2.3效果图
2.2.4 通配选择器
通配选择器（
*）用来选择所有元素。当然也可以选择某个元素下的所有元素。如：
*{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;} /* 元素类名为`demo`下的所有元素都将背景色设置为橙色。*/如下图所示：
2.2.4效果图
2.2.5 元素选择器
元素选择（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;} /* 通过ul元素选择器改变整个列表的背景色 */
2.2.5 效果图
2.2.6 ID选择器
在使用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;} /* 改变id为first的元素的背景色和文字颜色 */#last{background: #000;color: lime;} /* 改变id为last的元素的背景色和文字颜色 */
2.2.6 效果图
2.2.7 类选择器
类选择器(.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选择器并不支持多类名选择器，并将以末尾类名为准。
多类选择器用法效果图
2.2.8 群组选择器
群组选择器（selector1,selectorN）是将具有相同样式的元素分组在一起，每个选择器之间用逗号（,）隔开，例如：“selector1,selector2,...,selectorN”。这个逗号告诉浏览器，规则中包含多个不同的选择器，省去逗号就变成了后代选择器，这一点大家在使用中千万要小心。
作者：白小虫
链接：https://www.jianshu.com/p/3594e7e8b158
共同学习，写下你的评论
评论加载中...
作者其他优质文章
