在Html中,css伪类和伪元素到底有什么区别,怎么使用呢?

2020年5月14日 评论 1,261

区别

为了区分,我们可以把伪类比作太监,把伪元素比作皇帝。

1、表示不同
伪类是一个冒号,而伪元素是两个冒号,等于比伪类多了两个点。也就是说皇帝比太监要多了个不明物体!

2、数量不同。
众所周知,一个朝代皇帝只能有一个,而皇帝可以有多个,伪类和伪元素也是这样,伪类可以有多个,而伪元素只能有一个。
所以伪类可以拼接,比如:input:out-of-range:focus{background:red;},就是有两个伪类,第一个超出范围会显示红色,第二个伪类则表示必须是输入状态下才会显示。(具体案例可以看最后的项目源代码展示)

3、位置不同
太监可以在皇帝寝室也可以在大堂随意走动,而皇帝却不可以随意走动。
伪类和伪元素也是类似,伪元素只能在选择符的后方,而伪类可以在选择符前方和后方。

4、使用场景不同
在古时候皇帝是比较难见的,而太监却随处可见,处理日常杂务。目前伪元素相对伪类来说,可使用的场景较少。
伪类可以分为状态类、结构类、表单类、语言类很多不同的场景。

5、使用场景不同
伪类基于dom产生不同的状态,不产生新对象。伪元素创建不存在DOM的对象,而且可以进行操作。
这就像皇帝可以有王子和公主,而太监只能为他们服务。

下面是比较官方的说法:

(1)伪元素主要是用来创建一些不存在原有dom结构树种的新对象,并且可以对这些新对象进行操作。例如:用::before和::after在一些存在的元素前后添加文字样式等,这些被添加的内容会以具体的UI显示出来,被用户所看到的,这些内容不会改变文档的内容,不会出现在DOM中,不可复制,仅仅是在CSS渲染层加入。CSS3中建议使用::表示伪元素,如:div::before。

在Html中,css伪类和伪元素到底有什么区别,怎么使用呢?

 

::before和::after这两个伪类下有特有的属性content,必须有这个属性。

1、attr() 调用当前元素的属性,可以方便的比如将图片的Alt提示文字或链接的Href地址显示出来,如下:

a:after {
content: "(" attr(href) ")";
}

2、url() / uri() 用于引入媒体文件

h1:before{
content: url(log.png);
}

3、counter() 调用计数器,可以不使用列表元素实现序号功能。

h2:before{
counter-increment: chapter;
content: "Chapter" counter(chapter) ". "
}

(2)伪类表示已存在的某个元素处于某种状态,但是通过dom树又无法表示这种状态,就可以通过伪类来为其添加样式。它是基于DOM产生不同的状态,但不产生新对象。
例如a元素的:hover, :active等。CSS3中建议使用:表示伪元素,如:a:hover

在Html中,css伪类和伪元素到底有什么区别,怎么使用呢?

总之,伪元素的操作对象是新生成的dom元素,而不是原来dom结构里就存在的;而伪类恰好相反,伪类的操作对象是原来的dom结构里就存在的元素。
伪元素与伪类的根本区别在于:操作的对象元素是否存在于原来的dom结构里。

案例展示

不用JS,纯CSS实现导航栏Tab切换效果 网页前端

不用JS,纯CSS实现导航栏Tab切换效果

CSS 的强大之处有的时候超乎我们的想象,Tab切换,常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果 不用 Javascript,使用纯 CSS 方案,实现类...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: