css中的伪类

2024-08-31 20:52

文章标签 css frontend 伪类

本文主要是介绍css中的伪类，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

什么是伪类

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

用法

: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) - 选择不符合给定选择器的元素。

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

/* 选择列表中的第一个列表项 */
li:first-child {color: red;
}/* 选择鼠标悬停时的链接 */
a:hover {text-decoration: underline;
}/* 选择表单元素获得焦点时的样式 */
input:focus {border: 1px solid blue;
}

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

伪状态类

:checked - 选择处于选中状态的radio、checkbox或option元素。
:disabled - 选择处于禁用状态的表单元素。
:enabled - 选择处于启用状态的表单元素。
:indeterminate - 选择处于不确定状态的radio或checkbox元素。

结构性伪类

: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也引入了一些新的伪元素，例如：

::before - 在选定元素之前插入内容。
::after - 在选定元素之后插入内容。
::first-letter - 选择块级元素的第一个字母。
::first-line - 选择块级元素的第一行。
::placeholder - 选择表单元素的占位文本。
这些伪类和伪元素极大地增强了CSS的样式化能力，允许开发人员以更精细和更语义化的方式来设计网页。需要注意的是，随着CSS的发展，新的伪类和伪元素可能会被添加。因此，最好查阅最新的CSS规范以获取最新的信息。