专栏首页web秀CSS中伪类与伪元素,你弄懂了吗?

CSS中伪类与伪元素,你弄懂了吗?

前言

熟悉前端的人都会听过css的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,即使你有用过伪类与伪元素,但里面总有一两个你没见过的吧。

伪类与伪元素

先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述: CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

直译过来就是:css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释。

伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

伪类与伪元素的区别

这里通过两个例子来说明两者的区别。 下面是一个简单的html列表片段:

<ul>
    <li>我是第一个</li>
    <li>我是第二个</li>
</ul>

如果想要给第一项添加样式,可以在为第一个<li>添加一个类,并在该类中定义对应样式:

<ul>
    <li class="first-item">我是第一个</li>
    <li>我是第二个</li>
</ul>
li.first-item {
    color: orange
}

如果不用添加类的方法,我们可以通过给设置第一个<li>:first-child伪类来为其添加样式。这个时候,被修饰的<li>元素依然处于文档树中。

li:first-child {
    color: orange
}

下面是另一个简单的html段落片段:

<p>Hello World, and wish you have a good day!</p>

如果想要给该段落的第一个字母添加样式,可以在第一个字母中包裹一个元素,并设置该span元素的样式:

<p><span class="first">H</span>ello World, and wish you have a good day!</p>
.first {
    font-size: 5em;
}

如果不创建一个<span>元素,我们可以通过设置<p>:first-letter伪元素来为其添加样式。这个时候,看起来好像是创建了一个虚拟的<span>元素并添加了样式,但实际上文档树中并不存在这个<span>元素。

<p>Hello World, and wish you have a good day!</p>
p:first-letter {
    font-size: 5em;
}

从上述例子中可以看出,伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素。因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。

伪元素是使用单冒号还是双冒号

CSS3规范中的要求使用双冒号(::)表示伪元素,以此来区分伪元素和伪类,比如::before和::after等伪元素使用双冒号(::),:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外,大部分浏览器都支持伪元素的双冒号(::)表示方法。

然而,除了少部分伪元素,如::backdrop必须使用双冒号,大部分伪元素都支持单冒号和双冒号的写法,比如::after,写成:after也可以正确运行。

对于伪元素是使用单冒号还是双冒号的问题,w3c标准中的描述如下: Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

大概的意思就是:虽然CSS3标准要求伪元素使用双冒号的写法,但也依然支持单冒号的写法。为了向后兼容,我们建议你在目前还是使用单冒号的写法。

实际上,伪元素使用单冒号还是双冒号很难说得清谁对谁错,你可以按照个人的喜好来选择某一种写法。

伪类与伪元素的具体用法

这一章以含义解析和例子的方式列出大部分的伪类和伪元素的具体用法。下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图:

某些伪类或伪元素仍然处于试验阶段,在使用前建议先在Can I Use等网站查一查其浏览器兼容性。处于试验阶段的伪类或伪元素会在标题中标注。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS选择器如此之多,你了解多少?

    css选择器非常之多,常见的如class选择器,id选择器,标签选择器等等。每个的用法都有所区别,虽然很多都能到达同样的效果,但还是有一些更优的选择。

    Javanx
  • vue 中 key 值有什么作用?

    相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候,如果不使用key属性,Vue会产生警告,那么在这个时候key属性的作用是什么呢?

    Javanx
  • 精选前端面试题之HTML5/CSS3

    HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关...

    Javanx
  • HTML基础知识普及

    <meta charset="utf-8"> 规定页面的字符编码 <meta name="viewport" content="width=device...

    lesM10
  • 前端小知识点总结,助力你成功面试!

    1.Doctype的作用:此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 2.严格模式与混杂模式如何区分?有何意义? 区分浏览器的使用的标准 ...

    前端老鸟
  • 快速排序的JavaScript实现详解

    快速排序用分治策略对给定的列表元素进行排序。这意味着算法将问题分解为子问题,直到子问题变得足够简单可以直接解决为止。

    疯狂的技术宅
  • 算法面试必问:Top K问题浅析

    最近为了扩大团队规模,一直时刻保持脉脉上动态的更新,希望能认识一些新朋友新伙伴。发现脉脉确实挺有意思的哈,有人吐槽职场,有人招聘,有人分享面经,我今天看到有人发...

    写代码的阿宗
  • 线性表(一)

    mathor
  • 到底什么是数据结构?我认为是这样的

    最直观的就是数据库中的表:一张表就是一个数据对象,一条数据则是数据元素,数据项则是字段。

    小明爱学习
  • 【UI自动化-2】UI自动化元素定位专题

    UI自动化的学习,个人认为应该分五步走:环境搭建、元素定位、特殊场景处理、框架设计与搭建、测试平台开发。第一步的环境搭建其实没什么难度,都是固定的套路。今天就来...

    云深i不知处

扫码关注云+社区

领取腾讯云代金券