css --- 伪类(:before)和伪元素(::before)

2019-05-25 14:28 *奋斗* 阅读(487) 评论(0) 编辑收藏举报

1、伪类：用来获取不存在于 DOM 树中的信息（<a> 的 :visited :link 等），和获取不能被常规CSS选择器获取的信息（:target）。

2、伪元素：在 DOM 树中创建了一些抽象元素，这些抽象元素不存在于文档语言里（::before,::after）。它必须处于选择器语句的最后。

总结一下伪类与伪元素的特性及其区别：

1）伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
2）伪元素本质上是创建了一个有内容的虚拟容器；
3）CSS3中伪类和伪元素的语法不同；
4）可以同时使用多个伪类，而只能同时使用一个伪元素；

3、图文举例（显示结果：你是---郝鑫刚）

---【注意】---：伪元素和伪类的内容，无法用鼠标选中。

4、附件（css3 新增伪类汇总）

:root 选择文档的根元素，等同于 html 元素

:empty 选择没有子元素的元素

:target 选取当前活动的目标元素

:not(selector) 选择除 selector 元素意外的元素

:enabled 选择可用的表单元素

:disabled 选择禁用的表单元素

:checked 选择被选中的表单元素

:after 在元素内部最前添加内容

:before 在元素内部最后添加内容

:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n

:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数

:nth-child(odd)

:nth-child(even)

:nth-child(3n+1)

:first-child

:last-child

:only-child

:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n

:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数

:nth-of-type(odd)

:nth-of-type(even)

:nth-of-type(3n+1)

:first-of-type

:last-of-type

:only-of-type

::selection 选择被用户选取的元素部分

:first-line 选择元素中的第一行

:first-letter 选择元素中的第一个字符

个人统计【2】：2019-05-25、2019-05-26