|
一、什么是伪类及伪元素？
1、什么是伪类？ 官方给的解答是：伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素。 2、什么是伪元素？ 官方给的解答是：伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。 这么一看是不是很懵圈？那就是了，接下来详细讲一下为什么会懵圈。 二、伪类及伪元素容易混淆的点： 很多朋友在css1及css2开始就已经接触到了前端，但是在css3之前，伪类及伪元素的写法都是加在:之后的。举个栗子： 这是一个伪类： a:hover {
color:red;
}这是一个伪元素：input:after {
content:'哈哈哈'
}这样就会出现写法一样造成有时候难以区分，因此在CSS3中将伪元素的写法更新成两个:的形式了。但是目前浏览器都还是识别css3之前的写法。但是建议大家还是将伪元素的写法更新成css3的写法：input::after {
content:'哈哈哈哈'
}三、伪类及伪元素的区别：那么问题来了，两者的区别到底是什么呢？ 区别的关键是：它们是否创造了新的元素。 我们看官方给的解答中：伪元素是虚拟的元素。因此伪元素是会新创建一个元素出来。例如上边栗子中的伪元素例子，会在input之后创建一个‘哈哈哈’出来。而官方解答中的伪类则是存在于DOM之中的，因此它不会创建出新的元素，而是会对元素进行修饰的而已。 综上就是伪类及伪元素的区别。 |
|
公众号
