CSS 伪类和伪元素区别及常用伪类伪元素

技巧2年前 隔壁老李于 2023-08-17 07:33:12 最后编辑

伪类(pseudo class)和伪元素(pseudo element)都是前端开发中经常接触的概念,但是这两个概念特别容易搞混。

CSS 伪类和伪元素区别及常用伪类伪元素  第1张

什么是伪类、伪元素?

伪类:以冒号(:)开头,用于选择处于特定状态的元素。

伪元素:以双冒号(::)开头,用于在文档中插入虚构的元素。

伪类举例:

a:hover {
  color: red;
}

hover表示了a标签的某种状态(鼠标指针悬浮在a上时),选择器选择的是伪类前面的元素(a),当出现伪类描述的状态(元素处于悬浮状态)时,样式才生效

CSS 伪类和伪元素区别及常用伪类伪元素  第2张

伪元素举例:

div::before {
  content: '老司机';
}

before的作用是在内容元素之前创建一个不在文档树中的元素,选择器选择的不是div,而是浏览器自动创建了一个虚拟的元素。

CSS 伪类和伪元素区别及常用伪类伪元素  第3张

结论:

伪类用于向某些已经存在的选择器添加特殊效果,其本质还是类(class),作用于标签本身,但是限定了状态条件。

伪元素用于将效果添加到不存在的虚拟元素中,本质是元素(element),作用于该虚拟元素。

常见伪类:

:active元素处于活动状态时
:focus元素已获取焦点时
:hover元素处于悬浮状态时
:link链接未访问时
:visited链接已访问时
:first-child元素是首个子元素时
:last-child元素是最后一个子元素时
:nth-child()元素是第 n 个子元素时
:nth-last-child()元素是倒数第 n 个子元素时
:only-child元素是唯一子元素时
:first-of-type元素是首个特定类型的子元素时
:last-of-type元素是最后一个特定类型的子元素时
:nth-of-type()元素是第 n 个特定类型的子元素时
:nth-last-of-type()元素是倒数第 n 个特定类型的子元素时
:only-of-type元素是唯一的特定类型的子元素时
:not不满足指定条件时
:target元素 id 匹配到哈希值时
:root元素是文档树的根元素时
:lang()匹配到指定语言时
:empty元素处于没有子元素状态时
:invalid 和 :valid表单项是否有效
:required 和 :optional表单项是否必填
:in-range和 :out-of-range表单项是否超出范围
:read-only和 :read-write表单项是否只读
:enabled和 :disabled表单项是否禁用

常见伪元素:

::first-letter选中块状元素中的首字母
::first-line选中首行
::before在之前创建一个不在文档树中的元素
::after在之后创建一个不在文档树中的元素
::placeholder选中表单元素的占位文本
::file-selector-button选中类型为 file 的 input 里面的 button


本文由 @隔壁老李 于 2022-08-27 发布在 野路子博客,如无特别说明,本博文章均为原创,转载请保留出处。
评论 (0)
访客
Top