Web前端——CSS伪类选择器


一、伪类选择器概述

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选择没有子元素的元素,而且该元素也不包含任何文本节点

4.否定伪类选择器

E:not(F)选择所有除元素 F 外的 E 元素

5.目标伪类选择器

:target 可用于选取当前活动的目标元素


总结

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值