html5伪类选择器选择前几个 css中伪类选择器

转载

mob64ca13fe62db 2023-11-27 19:52:34

文章标签 html5伪类选择器选择前几个前端 css html 伪类选择器 文章分类 HTML5 移动开发

文章目录

一、伪类选择器概述

1.伪类
2.伪类选择器
3.语法

二、常用的伪类选择器

1.动态伪类选择器
2.UI 元素状态伪类选择器
3.结构伪类选择器
4.否定伪类选择器
5.目标伪类选择器

总结

一、伪类选择器概述

1.伪类

CSS中伪类是用来添加一些选择器的特殊效果。由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。

2.伪类选择器

普通选择器选中的是一个标签所有的状态，选中后添加的样式对标签的所有状态有效。
伪类选择器选中的是一个标签指定的状态，选中后添加的样式只针对这一个状态有效。

3.语法

普通选择器:状态{}

二、常用的伪类选择器

1.动态伪类选择器

链接伪类选择器
a:link超链接第一次访问之前，添加样式
a:visited超链接被访问之后，添加样式
用户行为选择器
E:hover鼠标悬停在标签上面，添加样式
E:active鼠标点击标签，但是不放手，添加样式
E:focus表单元素被聚焦时，添加样式
对超链接伪类设置样式时要按照如下顺序进行：a:link->a:visited->a:hover->a:active否则无效

2.UI 元素状态伪类选择器

E:checked选中的复选按钮或者单选按钮表单元素t
E:enabled所有可用的表单元素
E:disabled所有不可用的表单元素
UI 元素状态伪类选择器主要是针对 Form 表单元素进行操作，最常见的使用方式如设置 "type=“text” 有 enable 和 disabled 两种状态，enable 为可写状态，disabled 为不可状态。

3.结构伪类选择器

使用结构伪类选择器的好处是可以根据元素在文档中所处的位置，来动态地选择元素，从而减少 HTML 文档对 id 或类的依赖，有助于保持代码干净整洁。
另外需要注意的是，在结构伪类选择器中，子元素的序号是从 1 开始的

E:fisrt-childE的父元素的第一个子元素
E:last-childE的父元素的最后一个子元素
E:nth-child(n)E的父元素的第 n 个子元素【其中 n 可以是整数（1，2，3）、关键字（even偶，odd奇）、也可以是公式（2n+1）,而且 n 值起始值为 1，而不是 0】
E:root元素所在文档的根元素。在 HTML 文档中，根元素始终是 html，此时该选择器与 html 类型选择器匹配的内容相同
E:nth-last-child(n)E的父元素的倒数第 n 个子元素。此选择器与 :nth-child(n) 选择器计算顺序刚好相反，但使用方法都是一样的，其中 :nth-last-child(1) 始终匹配最后一个元素，与 last-child 等同。
E:empty选择没有子元素的元素，而且该元素也不包含任何文本节点