css伪类

Amo 6729

已于 2024-12-02 14:42:34 修改

阅读量798

点赞数 7

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 前端

于 2024-12-02 14:36:36 首次发布

本文链接：https://blog.youkuaiyun.com/print_2022/article/details/144187893

15 篇文章

订阅专栏

CSS 伪类（pseudo-classes）是用于选择元素的特定状态或位置的特殊选择器。伪类可以帮助我们针对特定的用户交互、元素状态或结构进行样式调整，而无需直接修改 HTML。伪类通常以冒号 (:) 开头。

下面是 CSS 常见伪类的总结和分类：

:hover
选中鼠标悬停在元素上的状态。
示例：a:hover { color: red; }
:focus
选中获取焦点的元素（如表单控件）。
示例：input:focus { border-color: blue; }
:active
选中正在被点击（激活）的元素。
示例：button:active { background-color: green; }
:focus-within
选中某个元素当它的子元素获取焦点时。
示例：div:focus-within { border: 2px solid blue; }
:focus-visible
选中在获得焦点时显式可见的元素，通常是键盘导航时才显示焦点。
示例：button:focus-visible { outline: 2px solid blue; }

:first-child
选中作为父元素第一个子元素的元素。
示例：p:first-child { font-weight: bold; }
:last-child
选中作为父元素最后一个子元素的元素。
示例：p:last-child { margin-bottom: 0; }
:nth-child(n)
选中作为父元素第 n 个子元素的元素，n 可以是数字、关键字、表达式等。
示例：li:nth-child(2) { color: red; }
:nth-last-child(n)
选中倒数第 n 个子元素。
示例：li:nth-last-child(2) { color: blue; }
:nth-of-type(n)
选中作为同类型子元素中的第 n 个元素。
示例：div:nth-of-type(2) { background-color: yellow; }
:first-of-type
选中父元素中同类型的第一个子元素。
示例：p:first-of-type { font-style: italic; }
:last-of-type
选中父元素中同类型的最后一个子元素。
示例：p:last-of-type { font-weight: bold; }
:empty
选中没有子元素（包括文本节点）的元素。
示例：div:empty { display: none; }
:not(selector)
选中不匹配指定选择器的元素。
示例：div:not(.active) { background-color: gray; }

:checked
选中被选中的元素（如复选框、单选框）。
示例：input:checked { background-color: green; }
:disabled
选中被禁用的表单元素。
示例：input:disabled { opacity: 0.5; }
:enabled
选中被启用的表单元素。
示例：input:enabled { border-color: green; }
:indeterminate
选中状态不确定的元素（例如复选框的中间状态）。
示例：input:indeterminate { background-color: yellow; }
:required
选中标记为必填的表单元素。
示例：input:required { border-color: red; }
:optional
选中标记为可选的表单元素。
示例：input:optional { border-color: blue; }

虽然伪元素与伪类不同，但它们也属于特殊的选择器。伪元素用于选择元素的一部分或在元素的特定位置插入内容。

::before
在元素的内容之前插入内容。
示例：p::before { content: "→ "; font-size: 20px; }
::after
在元素的内容之后插入内容。
示例：p::after { content: " ←"; font-size: 20px; }
::first-letter
选中元素的第一个字母。
示例：p::first-letter { font-size: 2em; font-weight: bold; }
::first-line
选中元素的第一行文本。
示例：p::first-line { color: blue; font-weight: bold; }
::selection
选中用户选中（高亮）的文本。
示例：::selection { background-color: yellow; color: black; }

:root
选中文档的根元素（<html> 标签），通常用来定义全局的 CSS 变量。
示例：html:root { --main-color: #333; }
:lang(language)
选中符合特定语言标识符的元素。
示例：p:lang(en) { font-family: Arial, sans-serif; }

浏览器支持： :has() 伪类并非所有浏览器都支持（例如旧版浏览器可能不支持）。但是，目前的主流浏览器如 Chrome、Safari 和 Edge 已经支持它。
性能问题：由于 :has() 会检查父元素内部的内容，可能会对性能产生一定影响，尤其是在包含大量子元素的复杂 DOM 结构中使用时。建议谨慎使用。