1、简单选择器
1.1、元素选择器（也叫标签选择器)
HTML代码：可以简单理解包含在
<>中的标签，比如：<html><body><div><p><h2>等等。示例：元素选择器
/* 设置div标签背景为浅灰色 */div{background-color: #ccc;}
1.2、类选择器
就是HTML的class属性。
示例：类选择器(css)
/* 设置box类的背景为浅灰色 */.box{background-color: #ccc;}
- 示例：类选择器(html)
<div class="box"></div>
- 示例：类选择器的复合应用
<style>/* 设置box类的背景为浅灰色 */.box{background-color: #ccc;}/* 设置box类+text_font类的复合应用红色字体 */.box.text_font{color: red;}</style><div class="box text_font">我是灰底红字</div>
注意：两个类之间不能有空格
1.3、ID选择器
id 选择器以 “#” 来定义
示例：ID选择器(CSS)
/* 设置id为：box的背景为浅灰色 */#box{background-color: #ccc;}
- 示例：ID选择器(html)
<div id="box">灰色背景</div>
class可以与id选择器共同使用
id 选择器的应用场景主要应用场景： 表单元素， 锚点
2、上下文选择器
2.1 后代选择器
后代选择器使用类+空格+标签组成
示例：后代选择器示例
<style>.box{background-color: #ccc;}/* p标签后代选择器 */.box p{color: red;}</style><div class="box"><p>后代选择器生效</p></div><p>后代选择器无效（因为不在box类中）</p>
2.2 父子选择器
父子选择器使用 类+
>+标签组成示例：父子选择器示例
<style>.box{background-color: #ccc;}/* p标签父子选择器 */.box > p{color: red;}</style><div class="box"><p>父子选择器生效</p></div><p>父子选择器无效（因为不在box类中）</p>
2.3 相邻兄弟选择器
- 相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素
<style>/* 将有复合类的第3个li标签的下一个4文字变为红色 */.item.box + .item{color: red;}</style><div class="box"><ul><li class="item">1</li><li class="item">2</li><li class="item box">3</li><li class="item">4</li><li class="item">5</li></ul></div>
2.4 同级所有选择器
- 同级所有选择器是选取指定元素下同级的所有元素。
<style>/* 将有复合类的第3个li标签以下同级的（4、5）文字变为红色 */.item.box ~ .item{color: red;}</style><div class="box"><ul><li class="item">1</li><li class="item">2</li><li class="item box">3</li><li class="item">4</li><li class="item">5</li></ul></div>
3、伪类选择器
3.1 结构伪类选择器(不分组)
:first-child匹配第一个元素
<style>/* :first-child 匹配第一个元素(第1个li标签字体红色) */li:first-child{color: red;}</style><div class="box"><ul><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li></ul></div>
:first-child匹配最后一个元素
<style>/* :last-child 匹配最后一个元素(第5个li标签字体红色) */li:last-child{color: red;}</style><div class="box"><ul><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li></ul></div>
:nth-child(索引号)匹配指定元素
<style>/* :nth-child(3) 匹配指定元素-索引方式:从1开始(比如：第3个li标签字体红色) */li:nth-child(3){color: red;}</style><div class="box"><ul><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li></ul></div>
:nth-child(2n)或:nth-child(even)匹配偶数元素
<style>/* :nth-child(2n)和:nth-child(even) 匹配偶数元素(第2/4个li标签字体红色) */li:nth-child(2n){color: red;}/* li:nth-child(even){color: red;} */</style><div class="box"><ul><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li></ul></div>
:nth-child(2n-1)或:nth-child(odd)匹配奇数元素
<style>/* :nth-child(2n-1)和:nth-child(odd) 匹配奇数元素(第1/3/5个li标签字体红色) *//* li:nth-child(2n-1){color: red;} */li:nth-child(odd){color: red;}</style><div class="box"><ul><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li><li class="item">5</li></ul></div>
- 其它：
| NO | 选择器 | 说明 |
|---|---|---|
| 1 | :nth-child(n + 索引号) | 指定位置剩下的所有元素 |
| 2 | :nth-child(-n + 索引号) | 只取前几个 |
| 3 | :nth-last-child(-n + 索引号) | 只取最后几个 |
| 4 | :nth-last-child(索引号) | 倒数的方式匹配 |
3.2 结构伪类选择器(分组)
:last-of-type伪类名+标签定义 例子如下：
<style>/* 匹配span标签最后1个=3 */.box span:last-of-type {color: red;}/* 匹配p标签最后1个=6 */.box p:last-of-type {color: red;}</style><div class="box"><span class="item">1</span><span class="item">2</span><span class="item">3</span><p class="item">4</p><p class="item">5</p><p class="item">6</p></div>
4、伪类与伪元素
- 伪类（前面是单冒号）
| No | 伪类 | 备注 |
|---|---|---|
| 1 | :target | 必须id配合，实现锚点操作 |
| 2 | :focus | 当获取焦点的时候 |
| 3 | :not() | 用于选择不满足条件元素 |
- 伪元素（前面是双冒号）
| No | 伪元素 | 备注 |
|---|---|---|
| 1 | ::selection | 一般用于设置选中文本的前后背景色 |
| 2 | ::before | 在元素前添加内容（与content一起使用） |
| 3 | ::after | 在元素后添加内容（与content一起使用） |
:target示例
<style>#search {display: none;}#search:target {display: block;}</style><span><a href="#search">搜索</a></span><form action="#" id="search"><input type="text" name="key" id="key" /><button>搜索</button></form>
:focus示例
<style>input:focus {background: #000;color: #fff;}</style><form action="#" id="search"><input type="text" name="key" id="key" value="获得焦点黑底白字"/><button>搜索</button></form>
:not()示例
<style>/* 非p标签字体红色 */.box :not(p){color:red;}</style>> **:focus示例**<div class="box"><p>1(p标签)</p><span>2(span标签)</span></div>
::before示例
<style>h2::before {content: "北京";}</style><h2>-是我国的首都</h2>
显示：北京-是我国的首都
::after示例
<style>h2::after {content: "北京";}</style><h2>我国的首都是-</h2>
显示：我国的首都是-北京
总结
- 简单CSS选择器：元素 < class < id
- 实际id与class选择器前面都有
*号，属于元素级别，id,class可以添加到任何元素上，所以可以省略； - 伪类选择器灵活应用，可以简化代码，提高效率。