浅析什么是伪类和伪元素？伪类和伪元素的区别解析

2024-05-20 20:48:14

一、理解什么是伪类？什么是伪元素？

1、伪类种类

　　伪类作用对象是整个元素

a:link{color:#111}
a:hover{color:#222}div:first-child{color:#333}
div:nth-child（3）{color:#444}

　　尽管这些条件不是基于DOM的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，div等等。

2、伪元素种类

　　伪元素作用于元素的一部分：一个段落的第一行或者第一个字母

p::first-line{color:#555}
p::first-letter{color:#666}
a::before{content : "hello world";}

3、总结：

　　伪元素其实相当于伪造了一个元素，例如 before，first-letter 达到的效果就是伪造了一个元素，然后添加了其相应的效果而已；

　　而伪类没有伪造元素，例如 first-child 只是给子元素添加样式而已。

　　伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

　　但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

二、伪类与伪元素的特性及其区别

1、伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息

2、伪元素本质上是创建了一个有内容的虚拟容器

3、CSS3中伪类和伪元素的语法不同

　　伪类 :link :hover 单冒号

　　伪元素 ::before ::after 双冒号

4、可以同时使用多个伪类，而只能同时使用一个伪元素

5、其中伪类和伪元素的根本区别在于：它们是否创造了新的元素，这个新创造的元素就叫 "伪无素"

6、伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。

　　这个新元素（伪元素）是某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中

7、伪类：存在dom文档中标签，在伪类时改变样式

8、因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

浅析什么是伪类和伪元素？伪类和伪元素的区别解析相关推荐

html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
CSS复合选择器（交集、并集、后代、子元素、兄弟、伪类、伪元素）
CSS复合选择器总结复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. :first-child与:first-of-type区别 :fi ...
CSS伪类选择器nth-child 选择3的倍数个元素写法
CSS伪类选择器nth-child 选择3的倍数个元素写法 web开发中,经常有对列表的3倍数列表项单独设置样式的需求. ul li:nth-child(3n+3) { colo ...
html伪类元素加图片,CSS伪类选择器:before、:after使用：插入字符、插入图片、插入项目编号...
before: 伪元素选择器用于在某个元素之前插入一些内容伪类选择器:before使用content属性插入字符.属性插入图片 css3 .p_before:before { content: 'H ...
【伪类与伪元素】用CSS伪元素（以:before为例）插入图片
[伪类与伪元素]用CSS伪元素(以:before为例)插入图片对于一些小图标类型的图片,若使用<img>略微有些麻烦,iconfont是一个不错的选择用起来也相当灵活,但是所需要步骤较为 ...
js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
html中鼠标移走的伪元素,a标签的伪元素的应用——link，hover，visited，active
a标签应用中,一般有四个状态: 鼠标未移入前(link),鼠标移入时(hover), 鼠标点击时(active),鼠标点击后(visited). body{ padding: 200px 0; } a ...
Css伪类选择器之常见形式、动态伪类篇
伪类选择器伪选择器包括伪类和伪对象选择器,伪选择器以冒号(:)作为前缀标识符.冒号前可以添加选择器,限定伪类应用的范围,冒号后为伪类和伪对象名,冒号前后没有空格,否则将错认为类选择器: 单纯式,E: ...
随元素而来，随元素而去，变一变样式，深藏功与名——论伪元素
大家好,这里是笑颜の行方. 本篇描述的是页面中一种神奇的存在--伪元素. 在CSS中有这样两个存在: :before 和 :after 如何使用呢?这需要满足一些条件. 我们先定义一段文本: < ...

最新文章

热门文章