首页 > 编程知识 正文

伪类和伪元素的区别是什么,什么是伪类和伪元素?

时间:2023-05-05 16:15:02 阅读:244126 作者:3831

  伪类和伪元素的区别 伪类:

1、本质上是为了弥补常规CSS选择器的不足;

2、可以同时使用多个伪类;

3、存在DOM文档中(元标签找不到,只有符合触发条件时才看到),逻辑上存在,但在文档树中却无须标识的“幽灵”分类。

4、如a元素的四个伪类:

        :link 定义正常链接的样式;

        :visited 定义已访问过链接的样式;

        :hover 定义鼠标悬浮在链接上时的样式;

        :active 定义鼠标点击链接时的样式。

(每次定义链接样式时务必确认定义的顺序,link--visited--hover--active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母)。)

伪元素:

1、本质上是创建了一个有内容的虚拟容器;

2、只能同时使用一个伪元素;

3、不存在DOM文档中,是虚拟的元素,是创建新元素;(代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。)

4、如::before 、::after

其中伪类和伪元素的根本区别在于:是否创造了新的元素,新创造的元素就叫伪元素

 

W3C中对于两者应用的描述:

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

伪元素:用于将特殊的效果添加到某些选择器(标签)

参考链接:https://www.w3cschool.cn/css_series/css_series-pwkt24q2.html

注意:

伪类只能使用“:”

而伪元素既可以使用“:”,也可以使用“::”

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

伪对象要配合content属性一起使用

伪对象不会出现在DOM中,所以不能通过js来操作,仅仅是在 CSS 渲染层加入

伪对象的特效通常要使用:hover伪类样式来激活

相关问题:

:after /::after和:before/::before的异同

相同: 都可以用来表示伪类对象,用来设置对象前的内容,:before和::before写法是等效的; :after和::after写法是等效的

不同点: :before/:after是CSS2的写法,::before和::after是CSS3的写法,CSS2要比CSS3的兼容性好,但在H5开发中建议使用::before/::after

 

 

 

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。