所有伪元素

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection
  • ::backdrop

伪元素的作用就是能允许在不添加额外声明的情况下为文档的某些部分添加样式。

一开始上来就想原理啊,文档啊,什么都先摆上,但是都不如来几个例子看着舒服。

<p data-height="250" data-theme-id="0" data-slug-hash="GpVbzR" data-default-tab="result" data-user="zhangchen915" class='codepen'>See the Pen 伪类 by zhangchen (@zhangchen915) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

上面的效果是不是很有意思,其是这个方括号就是用伪元素加上的,最后为伪元素加上了一些渐变效果。看完这个例子你就应该大致了解了伪元素的作用,就是利用它来装饰真正的元素 (无论是装饰图片还是其他一些效果) 而不需要更改 HTML 的内容。

此外以往我们在清除 float 的时候,会使用"div style="clear: both">或是br clear="all",但是会产生过多无意义的容器,为了避免这种情况,我们可以使用::before以及::after来优雅地清除float。