前端必修技能：高手进阶核心知识分享 - CSS伪类和伪元素

鱼仰泳

已于 2024-07-22 16:08:31 修改

阅读量1.1k

点赞数 16

分类专栏：高手进阶 - CSS功能详解文章标签：前端 css

于 2024-07-19 22:22:29 首次发布

本文链接：https://blog.csdn.net/uuplay0216/article/details/140559972

版权

前端必修技能：高手进阶核心知识分享 - CSS伪类和伪元素

在前端的工作中，经常会遇到伪类和伪元素，但很多人（包括我自己）都没有仔细的去分辨它们，归其原因，大概是因为：写法相似。但其实，伪类和伪元素还是有很多不同的。温故而知新，今天就来深入的聊一聊。

伪类和伪元素为什么产生？

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分。比如，一句话中的第一个字母，或者是列表中的第一个元素。换个说法，就是用css的类无法精确控制到的地方，才需要伪类和伪元素。

所谓文档树，你可以这样理解：HTML 的文档树是指由 HTML 元素组成的层次结构，这些元素包括 html、head、body 等，并且可以包含其他的元素或者文本。下面是一个典型的HTML文档树：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档树案例</title>
</head>
<body>
    <div id="content">
        <h1>我是文档的标题</h1>
        <p>我是文档的内容</p>
        <img src="image.jpg" alt="An example image">
        <a href="###">我是个链接</a>
    </div>
</body>
</html>

在这个示例中，html 是根元素，它包含了 head 和body 两个子元素。head 包含了 title 和 meta 元素，而 body 包含了 h1, p, 和 img 元素。这样的层次结构构成了 HTML 的文档树。

document
└── html
    ├── head
    │   └── title
    │       └── "文档树案例"
    └── body
        └── div#content
            ├── h1
            │   └── "我是文档的标题"
            ├── p
            │   └── "我是文档的内容"
            └── a
                └── "我是个链接"

也就是说，伪类和伪元素都不会出现在这个树上。

什么是伪类

说伪类，就得先说类。CSS的类是什么？就是 class 类选择器。

我们都知道类选择器的作用：用来给HTML的元素添加不同的样式，比如：

.blue{ color:blue; }

那么伪类呢？既然是带个伪的类，那么它的作用其实也是与类选择器相同，只不过，它是比类选择器更加细化的去给元素的某个特别状态（或者与类元素相关的指定的元素）增加样式。比如，鼠标滑过文字链接，按钮被按下，文本框获得焦点，又或者选择本元素的第一个子元素，第一个兄弟元素等等等等。这时候，就是需要伪类的时候。于是CSS给我们定义了伪类选择器：

a:hover{}
button:active{}
input:focus{}

我们可以把伪类理解成基于类选择器的特殊扩展和补充。伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。所以，它必须是依赖于类选择器的才能生效的。我们不能单独使用它。

那么，我们为什么需要为这些状态定义不同的样式？因为我们需要让访问者通过一个元素的不同的状态变化，清晰的感知到，他在哪里，他在做什么。

所以，伪类的概念大概就清楚了：伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

常用的伪类：

状态伪类

状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式就会失去。状态伪类的顺序很重要，顺序错误可能会导致没有效果。通常的建议是LVFHA，即—–未访问（:link）、已访问（:visited）、获得焦点（:focus）、激活（:active）和悬停（:hover）。（注意：状态伪类不一定只写在诸如 a，input，button等元素上，也可以作用于其他如 div、img等其他元素上）

选择器	示例	示例说明
:link	a:link	选择所有未访问的链接
:visited	a:visited	选择所有访问过的链接
:hover	a:hover	选择鼠标悬空的链接
:active	a:active	选择正在活动的链接
:focus	input:focus	选择获得焦点的输入框

举个例子

下面是一个a标签（链接）的四种状态。

a:link {
  color: blue;
}
a:visited {
  color: red;
}
a:hover {
  color: green;
}
a:active {
  color: yellow;
}

当鼠标悬浮在未访问或已访问链接的时候，都会同时存在两种状态，:link与:hover或:visited与:hover。如果:hover声明在:link或:visited之前，那么就会被覆盖掉。当鼠标点中链接的时候，会同时存在两种状态，:active与:hover。如果:active声明在:hover之前，那么会被覆盖掉。因此:hover与:active必须在:link与:visited之后，而:active必须在:hover之后，至于:link与:visited，它们两个的顺序可以互换。

下面动画演示了上述代码的作用：

:focus伪类更多地用于表单元素，可在元素聚焦时生效，例如为文本框添加:focus

input{
  padding: 5px 10px;
  background: #eaeaea;
  border:2px solid #666;
}
input:focus{
  outline: none;
  background: #f99;
  border:2px solid #10f;
}

在下图中，右边就是input文本框获得输入焦点时的样式。

结构化伪类

结构化伪类是 CSS3 新增选择器，利用 DOM 树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少 class 和 id 属性的定义，使文档结构更简洁。

伪类选择器	示例	示例说明
:root	匹配文档的根元素	一般的 html 文件的根元素是 html 元素。
:not (selector)	:not(p)	选择所有p以外的元素
:empty	p:empty	匹配所有没有子元素的 p 元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:first-child	p:first-child	选择符合的p元素，该p元素必须是其父元素的第一个子元素
:first-of-type	p:first-of-type	选择符合的p元素，该p元素必须是其父元素的第一个p子元素
:last-child	p:last-child	选择符合的p元素，该p元素必须是其父元素的最后一个子元素
:last-of-type	p:last-of-type	选择符合的p元素，该p元素必须是其父元素的最后一个p子元素
:nth-child(n)	p:nth-child(2)	选择符合的p元素，该p元素必须是其父元素的第2个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择符合的p元素，该p元素必须是其父元素的倒数第2个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择符合的p元素，该p元素必须是其父元素的倒数第2个p子元素
:nth-of-type(n)	p:nth-of-type(2)	选择符合的p元素，该p元素必须是其父元素的第2个p子元素
:only-of-type	p:only-of-type	选择符合的p元素，该p元素的父元素可以有多个子元素，但是类型为p的子元素只有一个
:only-child	p:only-child	选择符合的p元素，该p元素的父元素只有一个子元素，就是该p元素

:root

:root选择器用匹配文档的根元素。在HTML中根元素始终是HTML元素，所以也可以把:root理解为html根元素选择器，但是比html根元素的优先级高，:root伪类选择器常常被用于定义全局的CSS变量或者设置全局的CSS样式。比如：

:root{
    --font-size: 16px; // 定义CSS变量；
    --color:#330;    
    background-color: blue;
    --body-fonts: "Helvetica", "Arial", sans-serif;
    --line-height: 1.5;
    }

在具体的css中，你就可调用它们。好处就是，当你很多样式需要修改字号或者颜色时候，你只要在 :root这里修改，那么调用了它的元素就都修改了。不