CSS—伪类及伪元素

历史
  
伪类最开始的时候只是用来表示元素的动态(典型的锚伪类link、visited、hover、active) 
   在CSS2标准中对它进行了扩展让它虽然逻辑存在但不需要在DOM树中标识 
   伪元素代表了某个元素的子元素,虽然逻辑存在,但不存在于DOM树

定义

  • 伪类:用于向某些选择器添加特殊的效果,伪类的效果可以通过添加实际的类来实现 。
  • 伪元素:用于将特殊的效果添加到某些选择器,伪元素的效果可以通过添加实际的元素来实现 。

举例

一、链接伪类:
a:link——链接未访问

a:visited——链接访问过后

a:hover——鼠标悬停在链接上

扫描二维码关注公众号,回复: 3732736 查看本文章

a:active——鼠标点击连接时

二、段落伪元素
:/::first-letter——首字母下沉

:/::first-line——首行变化颜色

::selection——鼠标选中内容

三、其他伪类
:hover——鼠标悬停在元素上

:focus——元素获取焦点时

四、其他伪元素
:before/:after——在指定元素前/后添加内容

优先级


在计算权重的时候 :

  • 伪类与类优先级相同 。
  • 伪元素与标签优先级相同。

总结

  • 伪类与伪元素都是用于向选择器加特殊效果
  • 伪类与伪元素的本质区别就是是否抽象创造了新元素
  • 伪类只要不是互斥可以叠加使用
  • 伪元素在一个选择器中只能出现一次,并且只能出现在末尾
  • 伪类与伪元素优先级分别与类、标签优先级相同

猜你喜欢

转载自www.cnblogs.com/hbv1/p/9855323.html