CSS3 结构伪类选择器（全）
1.结构伪类选择器 ????
结构伪类可以根据文档结构关系来匹配特定的元素。结构伪类主要包括一下几种：
| 命令 | 注释 |
|---|---|
| ：first-child | 匹配第一个子元素 |
| ：last-child | 匹配最后一子元素 |
| ：nth-child（） | 按正序匹配特定子元素 |
| ：nth-last-child（） | 按倒序匹配特定子元素 |
| ：nth-of-type（） | 在同类型中匹配特定子元素 |
| ：nth-last-of-type（） | 按倒序在同类型中匹配特定子元素 |
| ：first-of-type | 匹配第一个同类型子元素 |
| ：last-of-type | 匹配最后一个同类型子元素 |
| ：only-child | 匹配唯一子类型 |
| ：only-of-type | 匹配同类型的唯一子元素 |
| ：empty | 匹配空元素 |
实例设计
本例设计了一个简单的列表栏，使用数字图标代替默认项目符号。在列表框中为每个列表定义相同的背景图像，借助结构伪类选择器。分别匹配每个列表项目，再调整背景图的位置，实现每行仅显示背景图上相应的数字区域，其他区域隐藏于可视区外。
1.新建简单 html5 设计个简单的列表结构。如图：
网页效果如下：
2.在内部样式表中定义列表框内基本样式。
效果如下
3.使用结构伪类匹配每列列表项，精确控制背景显示位置，以便仅显示对应的图像图标
本节讲述如何使用结构伪类选择器精确控制对象参数值。
二.否定伪类选择器
知识点：：not（）表示否定选择器，他能过滤掉 not（）函数匹配的元素。
实例设计：
1.下面实例页面中所有段位文本字体大小为 24px ，然后使用：not（.author）排出第一段文本，设置其他段落文本的字体大小为 14px，代码如下：
网页效果如下：
三.状态伪类选择器
知识点：
CSS包括以下3个UI状态伪类选择器。
：enabled // 匹配指定范围内所有可用的UI元素
：disabled // 匹配指定范围内所有不可用的UI元素
：checked // 匹配指定范围内所有选择的UI元素
PS: UI 表示用户交互界面，一般是指表单对象，如文本框、复选框、按钮等。
实例设计：
本例设计了一个简单的用户协议交互表单，当用户勾选“勾选”复选框后，页面底部会显示提交协议按钮，允许用户提交协议，否则隐藏显示，防止勿提表单
代码如下：
效果如下：
在样式表中设计如下两个样式，定义复选框未选中状态时隐藏提交按钮，显示提交文本
各位客官到这里就结束了！！
出处：在校生有森记录博客
网址：https://mp.****.net/mdeditor/102811335
严禁转载！只用于学习交流！