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

这两天就跟伪类和伪元素杠上了，查了好多文档还有技术博客，惟独忘去查根本，罪过罪过，今天看了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