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 设计个简单的列表结构。如图:

CSS3 结构伪类选择器(全)_第1张图片

网页效果如下:

CSS3 结构伪类选择器(全)_第2张图片

2.在内部样式表中定义列表框内基本样式。

CSS3 结构伪类选择器(全)_第3张图片

效果如下
CSS3 结构伪类选择器(全)_第4张图片

3.使用结构伪类匹配每列列表项,精确控制背景显示位置,以便仅显示对应的图像图标

CSS3 结构伪类选择器(全)_第5张图片

本节讲述如何使用结构伪类选择器精确控制对象参数值。

二.否定伪类选择器

知识点::not()表示否定选择器,他能过滤掉 not()函数匹配的元素。
实例设计:

1.下面实例页面中所有段位文本字体大小为 24px ,然后使用:not(.author)排出第一段文本,设置其他段落文本的字体大小为 14px,代码如下:
CSS3 结构伪类选择器(全)_第6张图片
网页效果如下:
CSS3 结构伪类选择器(全)_第7张图片

三.状态伪类选择器

知识点:

CSS包括以下3个UI状态伪类选择器。
:enabled // 匹配指定范围内所有可用的UI元素
:disabled // 匹配指定范围内所有不可用的UI元素
:checked // 匹配指定范围内所有选择的UI元素
PS: UI 表示用户交互界面,一般是指表单对象,如文本框、复选框、按钮等。

实例设计:

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

CSS3 结构伪类选择器(全)_第8张图片
效果如下:
CSS3 结构伪类选择器(全)_第9张图片
在样式表中设计如下两个样式,定义复选框未选中状态时隐藏提交按钮,显示提交文本

四:目标伪类选择器

知识点:目标伪类选择器(E:target)表示选择匹配E的所有元素,且匹配元素被相关URL指向。

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

实例设计:
单击锚点,跳转指定标题位置!
代码如下:
设计网页显示插入图片和锚点
CSS3 结构伪类选择器(全)_第10张图片
css修饰
CSS3 结构伪类选择器(全)_第11张图片

网页效果如下:
CSS3 结构伪类选择器(全)_第12张图片

五.动态伪类选择器

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

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

代码如下:

CSS3 结构伪类选择器(全)_第13张图片

网页效果如下:
CSS3 结构伪类选择器(全)_第14张图片

CSS3 结构伪类选择器(全)_第15张图片

在这里插入图片描述

附加:

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

出处:在校生有森记录博客
网址:https://mp.csdn.net/mdeditor/102811335

严禁转载!只用于学习交流!

你可能感兴趣的:(css,选择器,复杂选择器,伪类选择器,结构选择器,css调整图像背景参数,用户须知)