伪元素是什么呢?
从其名称上来说,伪即为假,在实际的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其它相关文章!