终于搞明白了伪类和伪元素

这两天就跟伪类和伪元素杠上了，查了好多文档还有技术博客，唯独忘去查根本，罪过罪过，今天看了w3school，豁然开朗。

先来看w3school对伪类的解释

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

再来看有哪些伪类

伪类

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

再来看伪元素

CSS 伪元素用于向某些选择器设置特殊效果。

伪元素

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

 

看出来了吧，他们都是向某些选择器添加特殊效果，都是一些特殊选择器，功能是一样的。

后来css3为了区分伪元素和伪类，规定伪元素用双冒号::，所以不管:before、:after，还是::before、::after，他们都是伪元素，从来都不是伪类，所以像我一样傻傻搞不清的小伙伴，这下分清了吧。

伪类，起的作用跟类是一样的，作用于标签；伪元素，作用于元素内容；比如

 1 <style>
 2         /*伪类*/
 3         p:first-child{
 4             color:red;
 5         }
 6         /*伪元素*/
 7         p:first-letter{
 8             color:green;
 9         }
10 </style>
11 <p>我是第一个P</p>
12 <p>我是第二个P</p>

效果

 

如果用类来替换他们实现同样的效果

 

 1 <style>
 2         /*伪类*/
 3         .p-first-child{
 4             color:red;
 5         }
 6         /*伪元素*/
 7         .p-first-letter{
 8             color:green;
 9         }
10 </style>
11 <p class="p-first-child"><span class="p-first-letter">我</span>是第一个P</p>
12 <p><span class="p-first-letter">我</span>是第二个P</p>

 

效果一样

罗嗦一堆，希望能对像我一样的菜鸟起点作用，大神勿喷~想要更详细的就去看w3school