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 表示用户交互界面，一般是指表单对象，如文本框、复选框、按钮等。

实例设计：

本例设计了一个简单的用户协议交互表单，当用户勾选“勾选”复选框后，页面底部会显示提交协议按钮，允许用户提交协议，否则隐藏显示，防止勿提表单 代码如下：

效果如下： 在样式表中设计如下两个样式，定义复选框未选中状态时隐藏提交按钮，显示提交文本

四：目标伪类选择器

知识点：目标伪类选择器（E：target）表示选择匹配E的所有元素，且匹配元素被相关URL指向。

PS：该选择器是动态选择器，只有当存在URL指向该匹配元素时，样式效果才有效

实例设计： 单击锚点，跳转指定标题位置! 代码如下： 设计网页显示插入图片和锚点 css修饰

网页效果如下：

五.动态伪类选择器

知识点：动态伪类是一类样式，只有用户与页面进行交互时有效， 包括一下两种： -----------------1.锚点伪类，如：link、：visited。 -----------------2.行为伪类，如：hover，：active和focus。

实例设计 本例设计修饰边框，按钮，利用网页背景色字体颜色来烘托立体变化。

代码如下：

网页效果如下：

附加：

各位客官到这里就结束了！！

出处：在校生有森记录博客 网址：https://mp.csdn.net/mdeditor/102811335 严禁转载！只用于学习交流！