css-伪类和伪元素的区别

1.伪类和伪元素的差别？

1.1 伪类是通过给子元素添加一个类，然后定义这个类的样式来实现效果

eg:  :link :visited :hover :active :focus :first-child

伪元素是通过添加一个实际的元素，在给元素添加样式来实现效果的。

eg: :first-letter :first-line :before :after

       <style>
            p>i:first-child {color: red}
       </style>
       <p>
        <i>first</i>
        <i>second</i>
       </p>
       伪类实现其实是
       <style>
       .first-child {color: red}
       </style>
       <p>
            <i class="first-child">first</i>
            <i>second</i>
       </p>


        <style>
            p:first-letter {color: red}
       </style>
       <p>I am stephen lee.</p>

       伪元素实现其实是

       <style>
            .first-letter {color: red}
        </style>
        <p><span class='first-letter'>I</span> am stephen lee.</p>

http://segmentfault.com/img/bVcccn

1.2.css3中为了区分二者：伪类用: 但是伪元素用::

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。