伪元素与伪类

Posted 2020-08-27 cleaverlove

                                      伪元素与伪类

为什么要写这篇文章？

　　伪元素和伪类一直都是很容易混淆的，没有大量的实践和用心去体会是不容易记住的。我相信对于绝大部分新手来说是这样的，我自己也是经常记不住，像这样不算难的问题，一直查阅别人的博文，没有点自己的思想，好像是很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权威指南》，是这么说的：  根据另外某种条件而非文档结构向文档中的某些部分应用样式，而且无法通过研究文档的标记准确地推断出采用何种方式应用样式。

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

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