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规范以获取最新的信息。
相关推荐
zwjapple36 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python
袁煦丞5 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作