CSS 伪元素有哪些?

伪元素是什么呢?

从其名称上来说,伪即为假,在实际的DOM中是不存在的,而事实上呢?我们可以借助一些CSS的特性让其模拟成一个元素,对于这样的元素我们称之为伪元素。

语法:

①伪元素的语法:

selector:pseudo-element {property:value;}

②CSS类也可以使用伪元素:

selector.class:pseudo-element {property:value;}

CSS 伪元素有哪些?

  • ::after (:after) 在选中元素中创建一个后置的子节点

  • ::before (:before) 在选中元素中创建一个前置的子节点

  • ::first-line (:first-line) 选取文字块首行字符

  • ::first-letter (:first-letter) 选取文字块首行首个字符

  • ::selection 选取文档中高亮(反白)的部分

  • ::placeholder 选取字段的占位符文本(提示信息)

  • ::grammar-error 选取被 UA 标记为语法错误的文本

  • ::spelling-error 选取被 UA 标记为拼写错误的文本

  • ::marker 选取列表自动生成的项目标记符号

  • ::cue (:cue) 匹配所选元素中 WebVTT 提示

  • ::backdrop 匹配全屏模式下的背景

  • ::slotted() 用于选定那些被放在 HTML模板 中的元素

  • ::inactive-selection 选取非活动状态时文档中高亮(反白)的部分

在W3C的标准规范中也有独立的规范文档,时到今日,伪元素的最新规范是CSS Pseudo-Elements Module Level 4。在该规范中有我们熟悉的伪元素,比如::first-line::first-letter::selection::placholder::after::before,也有我们不熟悉的::marker::inactive-selection::spelling-error::grammar-error

更多前端开发知识,请查阅 HTML中文网 !!

以上就是CSS 伪元素有哪些?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读