伪类和伪元素的区别

最新推荐文章于 2022-07-03 21:22:50 发布

Ultranana

最新推荐文章于 2022-07-03 21:22:50 发布

阅读量412

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： class

本文链接：https://blog.youkuaiyun.com/Ultranana/article/details/61924638

web前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了 CSS 中的伪类与伪元素概念，详细列举了常见的伪类如 :active、:focus 和 :hover 以及不常见的伪类如 :any 和 :disabled。同时，也解释了伪元素如 ::after 和 ::first-letter 的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概念：

伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。
伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式。

所有伪类：

常见伪类
:active 
:focus
:hover 
:link
:visited
:first-child
:lang

不常见伪类
:any
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:indeterminate
:in-range
:invalid
:last-child
:last-of-type
:left    
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid

所有伪元素：

::after
::before
::first-letter
::first-line
::selection

注意事项

你会发现伪元素使用了两个冒号 (::) 而不是一个冒号 (:)。这是CSS3的一部分，并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。
伪类参考
 伪元素参考