你真的了解伪元素 和 伪类嘛？？

伪类 和 伪元素

       根本区别在于：它们是否创造了新的元素。

        伪类：用于向某些选择器添加特殊的效果
        伪元素：用于将特殊的效果添加到某些选择器
        其实根本意思就是就是对那些不能通过class、id等选择元素的补充

伪元素选择符

伪类选择符

例子： 

<p>a</p>
<p>b c</p>

如果我们想要第一个p标签字体颜色变红怎么做呢 使用伪类就会很简单
1: 使用伪类：
p:first-child{
   color: red;
}


2: 不实用伪类：
<p> class="first">a</p>
<p>b c</p>

.first {
  color: red;
}


3: 使用伪元素
p::first-letter {
  color: red;
}

相关问题

 :after/::after 和 :before/::before的异同

相同点

都可以用来表示伪类对象，用来设置对象前的内容
:before 和 ::before 写法是等效的;  :after 和 ::after 写法是等效的
不同点

:before / :after 是Css2 的写法，::before / ::after 是Css3的写法
:before/:after 的兼容性要比 ::before/::after 好 ，
不过在H5开发中建议使用 ::before/::after 比较好

例子：

 伪对象的特效通常要使用:hover伪类样式来激活
 eg:当鼠标移在span上时，span前插入”duang”

<span>222</span>
<style>
   span {
      background: yellow;
   }
   span:hover::before {
     content: "duang";
   }
</style>