伪类和伪元素的区别

visitors 0   •     •   2017.03.30

伪类和伪元素作为前端搞事情的各位应该常听说,而且也一直在使用着,那他们到底真正的有什么区别呢。下面咱们就说说。

其实在css1和css2中伪类和伪元素没有明确区分开来,从都是使用一个冒号:可了解。但这明显是不对的,所以在css3中对伪类和伪元素无论是概念还是使用方式上都做了明确的区分。从伪类还是使用一个冒号:,但是伪元素是使用两个:可了解。那他们到底怎么区分的呢。

css3之前的伪类和伪元素

解释

先来看看w3c在css3之前对他们的解释
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于向某些选择器设置特殊效果。
好吧,你没看错,他们的解释一样。

使用方式

伪类

比如 :hover, :link, :nth-child(n), :focus, :lang 等
伪元素
比如 :after, :before, :firste-letter, :first-line
你说解释一样,使用一样,怪不得之前好多人对他们分不清,其实这个锅是w3c的。

css3的伪类和伪元素

解释

还是先来看看w3c在css3中对他们的解释

伪类存在的意义是为了通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。

伪元素在DOM树中创建了一些抽象元素,这些抽象元素是不存在于文档语言里的。比如:documen接口不提供访问元素内容的第一个字或者第一行的机制,而伪元素可以使开发者可以提取到这些信息。并且,一些伪元素可以使开发者获取到不存在于源文档中的内容(比如常见的::before,::after)

伪类

概念解读
1.找到那些不存在于DOM树中的信息。如::hover, :link 等悬浮和未被访问的链接的状态就属于不存在于DOM树中的信息。
2.不能被常规CSS选择器获取到的信息。如::target它就属于。

伪元素

概念解读
伪元素是在文档中创建了一个元素,::after, ::before可能更直观也更好理解,::first-line, ::first-letter等可能不是那么直观,但其实照他的解释,::first-line, ::first-letter等也是先创建个元素,然后再把第一行或者第一个字符放进这个容器里,然后就是你给这个容器添加样式了。

其实伪类就是为了1.方便获取元素和2.获取到css无法获取到的状态等信息
而伪元素就是给文本中添加一个虚拟的元素,目的是对内容信息进行修饰和辅助

伪类和伪元素区别

1.伪类使用一个冒号:,伪元素使用两个冒号:
2.伪类说白了是为了弥补普通选择器的不足,来获取更多信息,而伪元素目的是对内容信息进行修饰
3.伪类可以同时使用多个,伪元素只能使用一个,并且伪元素必须处于选择器语句的最后

注意

1.伪元素如果要兼容ie8,还是用一个冒号:
2.在css3中新加的伪元素必须写两个冒号:

目前伪类和伪元素

伪类 伪元素
:active ::after
:focus ::before
:hover ::first-line
:link ::first-letter
:visited ::placeholder
:first-child ::selection
:lang
。。。

我是来打家劫舍的,还不快速速交出银两。

 / 
  • 微信

  • 支付宝