CSS3伪类与伪元素的区别及注意事项

原理
w3c中对于它们是这么解释的

伪类:用于向某些选择器添加特殊的效果
伪元素:用于将特殊的效果添加到某些选择器

伪类只能使用“:”
而伪元素既可以使用“:”,也可以使用“::”
CSS3中的标准是伪类使用单冒号“:”
而伪元素使用双冒号“::”(避免混淆)
但是在此之前无论是伪类还是伪元素都使用单冒号“:”
所以为了保证兼容伪元素两种使用方法都是可以的
但是低版本IE有双冒号兼容问题
所以以前编写样式的人们对于伪类和伪元素就干脆统统使用单冒号
导致这种混淆一直延续下来

注意

在使用伪类和伪元素的时候
有一点要特别注意
伪类就像真正的类一样,可以叠加使用
没有数量上限,只要不是互斥的

伪元素就要严格的多
伪元素在一个选择器中只能出现一次,并且只能出现在末尾

在计算权重的时候
伪类与类优先级相同
伪元素与标签优先级相同

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 定义 首先先来看看伪类与伪元素的定义w3c中对于它们是这么解释的 CSS中伪类与伪元素的概念是很容易混淆的,今天就...
    读书的鱼阅读 4,351评论 0 1
  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 12,098评论 1 62
  • CSS中伪类与伪元素的概念是很容易混淆的今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义w...
    韩小强阅读 4,212评论 0 1
  • 在小说《三体》中,歌者文明向着太阳系的方向发射了一枚二向箔,结果整个太阳系包括小行星、行星、甚至太阳,都二维化了。...
    程君_七年新生阅读 3,788评论 1 2
  • 〔一〕 “粒粒。” 时隔三年,枣粒在这个陌生的城市里陌生的街道里听到熟悉的称谓熟悉的声音。 枣粒使劲儿的咽下去咬在...
    热浪_e352阅读 3,222评论 0 2