伪元素与伪类的简单介绍

伪类是一个以冒号(:)作为前缀,被添加到一个选择器末尾的关键字,当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类。

  下面是几个比较常用的伪类选择器:

  • :active CSS伪类匹配被用户激活的元素。

  • :hover 会在光标(鼠标指针)悬停在元素上时提供关联的样式。

  • :focus 表示获得焦点的元素(如表单输入)。

  • :first-child 表示在一组兄弟元素中的第一个元素。

伪元素前缀是两个冒号 (::) , 同样是添加到选择器后面去选择某个元素的某个部分。

  下面是几个比较常用的伪元素选择器:

  • ::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修 饰性的内容。此元素默认为行内元素。

  • ::after 用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装 饰内容。这个虚拟元素默认是行内元素。

*::before::after一般用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标。

如果大家还想对伪类和伪元素有更多深入的了解,请前往MDN进行了解学习,感谢大家的观看!

  MDN链接:https://developer.mozilla.org/zh-CN/

原文地址:https://www.cnblogs.com/yaokai729/p/11252358.html