css中的伪类

什么是伪类

伪类(Pseudo-classes)是 CSS 中的一个重要概念,它们用于定义元素的特定状态。伪类可以基于元素的特定属性或状态来选择和样式化文档树中的元素,而不需要使用类或 ID。伪类通常以冒号 : 开头。

用法

javascript 复制代码
:link - 选择未被访问的链接。
:visited - 选择已访问的链接。
:hover - 当鼠标悬停在元素上时,选择元素。
:active - 当元素被激活(如鼠标按下)时,选择元素。
:focus - 当元素获得焦点时,选择元素。
:first-child - 选择其父元素的第一个子元素。
:last-child - 选择其父元素的最后一个子元素。
:nth-child(n) - 选择其父元素的第 n 个子元素。
:nth-of-type(n) - 选择其父元素的第 n 个特定类型的子元素。
:nth-last-child(n) - 选择其父元素的倒数第 n 个子元素。
:only-child - 选择其父元素唯一的子元素。
:only-of-type - 选择其父元素唯一类型的子元素。
:empty - 选择没有子元素的元素(包括文本节点)。
:target - 选择当前活动的锚点目标元素。
:not(selector) - 选择不符合给定选择器的元素。

伪类可以与元素选择器或其他选择器结合使用,以精确地定位和样式化文档中的元素。例如:

javascript 复制代码
/* 选择列表中的第一个列表项 */
li:first-child {
  color: red;
}

/* 选择鼠标悬停时的链接 */
a:hover {
  text-decoration: underline;
}

/* 选择表单元素获得焦点时的样式 */
input:focus {
  border: 1px solid blue;
}

CSS3 引入了许多新的伪类,例如结构伪类、状态伪类和表单相关伪类,大大增强了选择和样式化文档的能力。

伪状态类
javascript 复制代码
:checked - 选择处于选中状态的radio、checkbox或option元素。
:disabled - 选择处于禁用状态的表单元素。
:enabled - 选择处于启用状态的表单元素。
:indeterminate - 选择处于不确定状态的radio或checkbox元素。
结构性伪类
javascript 复制代码
:nth-child(n) - 选择其父元素的第n个子元素。
:nth-last-child(n) - 选择其父元素的倒数第n个子元素。
:nth-of-type(n) - 选择其父元素的第n个指定类型的子元素。
:nth-last-of-type(n) - 选择其父元素的倒数第n个指定类型的子元素。
:first-of-type - 选择其父元素的第一个指定类型的子元素。
:last-of-type - 选择其父元素的最后一个指定类型的子元素。
:only-child - 选择其父元素唯一的子元素。
:only-of-type - 选择其父元素唯一类型的子元素。
:root - 选择文档的根元素,通常是<html>。
:empty - 选择没有子元素的元素(包括文本节点)。
否定伪类

:not(selector) - 选择不符合给定选择器的元素。

目标伪类

:target - 选择当前活动的锚点目标元素。

其他伪类

:fullscreen - 选择处于全屏模式的元素。

:selection - 选择用户选中的文本。

伪元素

虽然不是伪类,但值得一提的是CSS3也引入了一些新的伪元素,例如:

javascript 复制代码
::before - 在选定元素之前插入内容。
::after - 在选定元素之后插入内容。
::first-letter - 选择块级元素的第一个字母。
::first-line - 选择块级元素的第一行。
::placeholder - 选择表单元素的占位文本。
这些伪类和伪元素极大地增强了CSS的样式化能力,允许开发人员以更精细和更语义化的方式来设计网页。需要注意的是,随着CSS的发展,新的伪类和伪元素可能会被添加。因此,最好查阅最新的CSS规范以获取最新的信息。
相关推荐
yanyu-yaya几秒前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me6 分钟前
react使用eventBus在不同模块间进行通信
前端·react.js
__不想说话__33 分钟前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
一个小潘桃鸭36 分钟前
需求:对表格操作列中的操作进行局部刷新
前端
番茄比较犟37 分钟前
Combine知识点switchToLatest
前端
北京_宏哥37 分钟前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
Process41 分钟前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化
大松鼠君41 分钟前
轿车3D展示
前端·webgl·three.js
大林i瑶41 分钟前
svg按钮渐变边框
css·svg
却尘42 分钟前
URL参数传递的两种方式:查询参数与路径参数详解
前端