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规范以获取最新的信息。
相关推荐
麦兜*1 小时前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
知了一笑2 小时前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室2 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~2 小时前
重学前端004 --- html 表单
前端·html
遇到困难睡大觉哈哈3 小时前
CSS中的Element语法
前端·css
Real_man3 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中3 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术3 小时前
日历插件-FullCalendar的详细使用
前端·javascript
咔咔一顿操作3 小时前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
LuckyLay4 小时前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust