伪类与伪元素的区别

W3C关于伪类伪元素的定义

  • 伪类:用于向某些选择器添加特殊的效果。
  • 伪元素:将特殊的效果添加到某些选择器上。

    明确两点:
    1 都与选择器相关
    2 特殊效果,这两者描述了其他css无法描述的东西

种类

  • 伪类:
    :active、:focus、:hover、:link、:visited、:first-child(将特殊的样式添加到元素的第一个子元素)、:lang(允许创作者来定义指定的元素中使用的语言)

    这里注意:a标签相关的伪类的顺序::link,:visited,:hover,:active(可以用 love hate 来记忆)

  • 伪元素:
    :first-letter(将特殊的样式添加到文本的首字母)、:first-line(将特殊的样式添加到文本的首行)、:before(使用content属性在某元素之前插入某些内容)、:after(在某元素之后插入某些内容)

    注意:
    对于:before和:after必须配合content属性使用,添加的内容不会改变文档结构,不可复制,仅仅是在CSS渲染层加入,display默认值为inline(尽量用来显示一些修饰性的内容,如图标,也可以用:after清除浮动)

    伪类和伪元素的区别

    以伪类中的:first-child和伪元素中的:first-letter为例:
    :first-child:用于选取属于其父元素的首个子元素的指定选择器。
    :first-letter:用于选取指定选择器的首字母。

<p>
        <i>Firsti>
        <i>Second i>
    p>
 p>i:first-child{
            color: red;
        }

效果:
这里写图片描述

如何模拟上述效果? 添加类

 <p>
        <i class="first-child">Firsti>
        <i>Second i>
    p>
 .first-child{
            color: red;
        }

再看伪元素的效果及模拟:

<p>
        Hello world
    p>
 p:first-letter{
           color: coral;
       }

效果:
这里写图片描述
如何模拟上述效果?添加元素

<p>
        <span>Hspan>ello world
    p>
span{
  color:red;
}

这也是为什么叫做伪类,为什么叫做为元素的原因。

伪元素与元素的区别

  1. 伪元素无法通过JS获取其DOM
  2. 伪元素无法通过浏览器开发者工具直接查看
  3. 伪元素默认是 inline

使用伪元素的注意事项

  1. 使用伪元素before,after必须设置content
  2. 使用伪元素before,after显示背景图,一定要使用display设置为块元素
  3. 使用伪元素before,after设置为display:inline-block,需要再次设置vertical-align:middle


总结

为了区分伪类和伪元素,CSS3明确规定伪类用一个单引号表示,伪元素用一个双引号表示。
由于兼容性问题,单引号表示伪元素仍然可以使用。

你可能感兴趣的:(css)