伪元素与伪类

                                      伪元素与伪类

为何要写这篇文章？

　　伪元素和伪类一直都是很容易混淆的，没有大量的实践和用心去体会是不容易记住的。我相信对于绝大部分新手来讲是这样的，我本身也是常常记不住，像这样不算难的问题，一直查阅别人的博文，没有点本身的思想，好像是很low的一件事，所以写下这篇文章。

 

什么是伪类？

　　伪类的实质是把某种幻像类关联到与伪类相关的元素上，举个例子：

<div>
      <p>These are the necessary steps:</p>
</div>

　使用规则  p:first-child  { font-weight: bold; }，会将DIV的第一个子元素P字体变粗。

　　若是不使用伪类，咱们也但愿达到以上效果，那么咱们给P元素添加类名first-child,以下:

<div>
    <p class="first-child"> These are the necessary steps:</p>
</div>

　　使用规则 .first-child { font-weight: bold; }  能够达到一样的效果。

　　这也就是为何叫作伪类，“类”字体如今好像存在于一个规则，与幻想的类名联系在一块儿，而咱们能够直接使用伪类，添加样式，而不用先想好类名，而后再添加样式。

　伪类的种类有：　　

　　　　连接伪类： :link,  :visited

　　　　动态伪类：  :focus,  :hover,  :active

           对第一个子元素:   :first-child

　　　　根据语言选择：   :lang

 

什么是伪元素？

　　伪元素可以在文档中插入假想的元素，从而获得某种效果。再使用上一个例子：

<div>
    <p> These are the necessary steps: </p>
</div>

　　使用规则p:first-letter { font-size: 200%; }  p元素的第一个字母大小是其他字母的两倍。

　　而不使用伪元素，要达到一样的效果，则须要使用新的标签将p元素的第一个字母包裹起来，而后添加类名再添加样式。

<div>
    <p>
         <i class="first-letter">T<i>
         hese  are necessary steps:
    </p>
</div>

　　使用规则 .first-letter { font-size: 200%; } 也能够实现一样的效果。

　　这也就是为何叫伪元素了，“元素”体如今咱们能够不添加额外的标签（标签也叫元素），就能够直接给想要的字母添加样式，就好像使用元素选择器同样。

　　常见的伪元素：

　　　　　　CSS2.1中定义了4个伪元素：设置首字母样式（ :first-letter ），设置第一行样式（ :first-line ），设置以前（ :before ）和以后元素（ :after ）的样式

两者的异同

　　相同的地方：①两者都是与选择器有关，有的书又叫伪类选择器和伪元素选择器。②参考《CSS3权威指南》，是这么说的：  根据另外某种条件而非文档结构向文档中的某些部分应用样式，并且没法经过研究文档的标记准确地推断出采用何种方式应用样式。

　　不一样的地方：伪类为某些元素（甚至是文档自己）的状态所指示的幻像类制定样式。（强调元素，体现伪“类”）.

　　　　　　　　伪元素能够为文档中不必定具体存在的结构制定样式。（强调不必定具体存在，体现伪“元素"）.

伪元素的兼容性

　　在CSS3选择器中已经将伪元素前面的一个冒号变为两个冒号了。在CSS2选择器中，老的规范中，伪类和伪元素都是一个冒号，新规范为了区分，伪元素统一用两个冒号“::”。所以之后在写CSS3时，推荐使用两个冒号。伪类用一个冒号，这也算一个区别吧。