CSS3 结构伪类选择器（全）

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
严禁转载！只用于学习交流！