伪类和伪元素的区别

starsfun 发布于2019-08-29 15:09 / 3489人阅读

摘要：伪元素用于将特殊的效果添加到某些选择器。因此，伪类与伪元素的区别在于有没有创建一个文档树之外的元素。伪类代表了一组兄弟元素中的第一个元素。伪类的实质就是把某种幻想类关联到某种伪类相关的元素中。

在css2中是这样定义二者的：

CSS 伪类用于向某些选择器添加特殊的效果。

CSS 伪元素用于将特殊的效果添加到某些选择器。

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

第一点讲的是获取不存在与DOM树中的信息。比如标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；

第二点讲的是获取不能被常规CSS选择器获取的信息。比如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素。

target:URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。

li:first-child类似于

li.first-child 一样
这个时候，被修饰的

元素依然处于文档树中。

ul:first-letter类似于


    1
    23

ul:first-letter被修饰的时候，元素并不处于文档树中。

因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

:first-child CSS伪类

代表了一组兄弟元素中的第一个元素。在level3实现中，被匹配的元素需要具有一个父级元素，而在level4实现中则不需要

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

p:first-child，常见的错误理解是这个选择器是选择p的第一个元素。

伪类的实质就是把某种幻想类关联到某种伪类相关的元素中。

:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。

同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。

伪元素

伪元素包括:first-letter, :first-line, :before ,:after等

所有的伪元素都要写在伪元素选择器的最后面，如果这样写就会出错，

p:first-letter em{
    
}

这是不允许的。

云服务器 GPU云服务器 java抽象类和接口的区别伪类 UI伪类伪类 html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113135.html

详解 CSS 属性 - 伪类和伪元素的区别

摘要：之前写了一篇详解属性的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸兄指正了我的错误，所以今天打算好好研究下两者的区别。伪元素用于将特殊的效果添加到某些选择器。伪类种类伪元素种类区别这里用伪类和伪元素来进行比较。之前写了一篇《详解 CSS 属性 - :before && :after》的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸 @ri...

jiekechoo 2019-08-28 17:55 评论0 收藏0
详解 CSS 属性 - 伪类和伪元素的区别

摘要：之前写了一篇详解属性的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸兄指正了我的错误，所以今天打算好好研究下两者的区别。伪元素用于将特殊的效果添加到某些选择器。伪类种类伪元素种类区别这里用伪类和伪元素来进行比较。之前写了一篇《详解 CSS 属性 - :before && :after》的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸 @ri...

AZmake 2019-08-01 14:39 评论0 收藏0
CSS3伪类和伪元素

作为一个CSS3初学不久者来说，很容易混淆单冒号（:）和双冒号（::）的用法，以为两者可以互换着来使用。我自己之前也混淆过他们，因为两者看起来太相像了，就像孪生兄弟。但实际上，他们的区别还是挺大的，最多算得上近房亲戚。下面我们来开始讲讲单冒号（:）伪类和双冒号（::）伪元素有什么相同和不同点（另外在CSS2中单冒号: 也叫做伪对象，具体可看看http://www.mb5u.com/tool/cs...

mozillazg 2019-04-23 13:35 评论0 收藏0
我终于理解了伪类和伪元素

摘要：伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间的区别，以致于混淆概念。除了上面这个本质区别以外，在中，伪类用单冒号表示而伪元素用双冒号表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 伪类和伪元素，对于绝大多数同学来说，都是耳熟能详的名字，但确实又有很多人搞不清楚它们之间...

张迁 2019-08-30 14:05 评论0 收藏0
CSS基础篇-- :before && :after的用法，伪类和伪元素的区别

摘要：一的用法如同对伪元素的名称一样，是用来给指定的元素的内容前面插入新的内容。二伪类和伪元素的区别伪类种类伪元素种类伪类作用对象是整个元素例如尽管这些条件不是基于的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，等等。一：:before && :after的用法 :before 如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明： .b...

X_AirDu 2019-08-28 18:15 评论0 收藏0