当前位置: 首页/ 学苑/学习Note/

伪类和微元素

2018-05-10| 阅读:890 |类别:学习Note

1、伪类

伪类存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息

伪类其实是弥补了CSS选择器的不足,用来更方便地获取信息


通过上面的概念我们知道了伪类的功能有两种:

1.格式化DOM树以外的信息。比如:<a>标签的:link、:visited等。这些信息不存在于DOM树中。

2.不能被常规CSS选择器获取到的信息。比如:要获取第一个子元素,我们无法用常规的CSS选择器获取,但可以通过:first-child来获取到。

:first-child    匹配第一个子元素。

:last-child     匹配最后一个子元素。

:first-of-type  匹配属于其父元素的第一个特定类型的子元素。

:last-of-type   匹配属于其父元素的最后一个特定类型的子元素。


2、伪元素

伪元素可以创建一些文档语言无法创建的虚拟元素。

伪元素本质上是创建了一个虚拟容器(元素),我们可以在其中添加内容或样式

比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter、::first-line)。

同时,伪元素还可以创建源文档不存在的内容,比如使用::before 或 ::after

 ::before    在被选元素之前插入内容。需要指定content属性来插入内容。

 ::after    在被选元素之后插入内容。需要指定content属性来插入内容。

::first-letter  匹配元素中文本的首字母。

::first-line   匹配元素中第一行的文本(只能在块元素中使用)。

::selection   匹配被用户选中的部分。

参考: https://juejin.im/post/5a9d0710518825556b6c425f



觉得有用,烦请给个小赏¥以资鼓励!~~