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规范以获取最新的信息。
相关推荐
王哲晓9 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_41112 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v14 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云24 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058726 分钟前
web端手机录音
前端
齐 飞32 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试