乐趣区

关于vue.js:伪类伪元素的区别和应用场景

每次被他人闻到伪类和伪元素有什么区别的时候,都是傻傻分不清楚,答复的也不尽人意;所以伪类和伪元素的区别是什么呢?作用是什么呢?本文将从区别与作用两方面来学习伪类和伪元素的常识。

  1. 伪类与伪元素的区别
    伪类:w3c 的规范定义是:CSS 伪类是用来增加一些选择器的特殊效果。

     顾名思义,是一个类,类是什么是 css 选择器呀,所以 css 选择器不会存在于 dom 元素中,所以想想咱们罕用的那些是伪类(不存在与 dom 构造中,还能管制款式的)第一个想到的应该是 a 标签的哪几种状态伪类了吧,比方
    
    a:link {color:#FF0000;} /* 未拜访的链接 */
    a:visited {color:#00FF00;} /* 已拜访的链接 */
    a:hover {color:#FF00FF;} /* 鼠标划过链接 */
    a:active {color:#0000FF;} /* 已选中的链接 */

    还有一些比方咱们罕用的:first-child,:last-child :lang :checked :empty, 以下为全副

    咱们先来总结一些伪类:
    1、伪类是类,所以跟 css 选择器无关,不存在与 dom 中
    2、CSS 伪类是用来增加一些选择器的特殊效果的
    3、伪类后面之后一个冒号:first-child

  2. 伪元素:伪元素是发明文档树之外的对象。伪元素也是元素,只不过不存在与 dom 对象中,然而浏览器审查元素的时候能看失去的,比方::before ::after

    咱们总结一下伪元素:

    1. 伪元素是两个冒号
    2. 伪元素能够被审查元素看到

    以上总结辨别一下两者的区别
    相同点:

    • 伪类和伪元素都不呈现在源文件和文档树中。也就是说在 html 源文件中是看不到伪类和伪元素的。

    不同点:
    伪类实质上是为了补救惯例 CSS 选择器的有余,以便获取到更多信息;
    伪元素实质上是创立了一个有内容的虚构容器;
    CSS3 中伪类和伪元素的语法不同;
    能够同时应用多个伪类,而只能同时应用一个伪元素;
    一句话是伪元素产生新对象,在 DOM 树中看不到(审查元素的时候能够看到),然而能够操作;伪类不产生新的对象,仅是 DOM 中一个元素的不同状态;

退出移动版