伪类与伪元素的区别

W3C关于伪类伪元素的定义

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

• 伪元素：将特殊的效果添加到某些选择器上。

  明确两点：
  1 都与选择器相关
  2 特殊效果，这两者描述了其他css无法描述的东西
  
  

种类

• 伪类：
  :active、:focus、:hover、:link、:visited、:first-child（将特殊的样式添加到元素的第一个子元素）、:lang（允许创作者来定义指定的元素中使用的语言）

  这里注意：a标签相关的伪类的顺序：:link，:visited，:hover，:active（可以用 love hate 来记忆）

• 伪元素：
  :first-letter（将特殊的样式添加到文本的首字母）、:first-line（将特殊的样式添加到文本的首行）、:before（使用content属性在某元素之前插入某些内容）、:after（在某元素之后插入某些内容）

  注意：
  对于:before和:after必须配合content属性使用，添加的内容不会改变文档结构，不可复制，仅仅是在CSS渲染层加入，display默认值为inline（尽量用来显示一些修饰性的内容，如图标，也可以用:after清除浮动）
  
  

  伪类和伪元素的区别

  以伪类中的:first-child和伪元素中的:first-letter为例：
  :first-child：用于选取属于其父元素的首个子元素的指定选择器。
  :first-letter：用于选取指定选择器的首字母。

<p>
        <i>First</i>
        <i>Second </i>
    </p>

 p>i:first-child{
            color: red;
        }

效果：

如何模拟上述效果? 添加类

 <p>
        <i class="first-child">First</i>
        <i>Second </i>
    </p>

 .first-child{
            color: red;
        }

再看伪元素的效果及模拟：

<p>
        Hello world
    </p>

 p:first-letter{
           color: coral;
       }

效果：

如何模拟上述效果?添加元素

<p>
        <span>H</span>ello world
    </p>

span{
  color:red;
}

这也是为什么叫做伪类，为什么叫做为元素的原因。

伪元素与元素的区别

1. 伪元素无法通过JS获取其DOM
2. 伪元素无法通过浏览器开发者工具直接查看
3. 伪元素默认是 inline
   
   

使用伪元素的注意事项

1. 使用伪元素before,after必须设置content
2. 使用伪元素before,after显示背景图，一定要使用display设置为块元素
3. 使用伪元素before,after设置为display:inline-block,需要再次设置vertical-align:middle

总结

为了区分伪类和伪元素，CSS3明确规定伪类用一个单引号表示，伪元素用一个双引号表示。
由于兼容性问题，单引号表示伪元素仍然可以使用。