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 | 群组选择器 | 将每一个选择器匹配的元素合并 |
实战体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用CSS3基本选择器</title>
<style type="text/css">
*{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;}
</style>
</head>
<body>
<ul class="clearfix demo">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">2</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通配选择器
通配选择器（*）用来选择所有元素
```css
*{margin:0;padding:0} //此代码在Reset的样式文件中经常见到，表示所有元素的margin和padding都设置为0```
代码示例
```css
*{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选择器改变整个列表的背景色
```css
*{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选择器具有唯一性。
```css
*{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}```
####2、5 类选择器
类选择器（.class）是以独立于文档元素的方式来指定元素样式。于ID选择器最大的不同之处是：**类选择器在一个页面中可以有多个相同的类名，而ID选择器其ID值在整个页面中是唯一的一个**
```css
*{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}//设置背景为绿色，并且加粗文字```
若在代码后面再添加一行
```css
.item.important{background:red;}//列表3同时具有important和item类名，所以才会执行代码```
####2、6群组选择器
群组选择器（selector1,selectorN）是将具有相同样式的元素分组在一起，每个选择器之间用（，）隔开。
网友评论