伪元素与伪类

Posted cleaverlove

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了伪元素与伪类相关的知识,希望对你有一定的参考价值。

                                      伪元素与伪类

为什么要写这篇文章?

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

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

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

以上是关于伪元素与伪类的主要内容,如果未能解决你的问题,请参考以下文章

伪类与伪元素

说说伪类与伪元素的不同

伪元素与伪类

伪类与伪元素的区别

伪类与伪元素

伪类选择器与伪元素选择器的区别