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规范以获取最新的信息。
相关推荐
y先森5 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇8 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒8 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员8 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐8 小时前
前端图像处理(一)
前端