提升你的CSS技能：深入理解伪类选择器和伪元素选择器！

news2024/11/27 10:30:59

在CSS的世界里，有些选择器并不像它们的名字那样直接。今天，我们要探索的是两种特殊的选择器：伪类选择器和伪元素选择器。它们虽然名字相似，但功能和用途却大有不同。

下面就让我们一起来了解一下它们是如何在我们的页面布局中扮演着不可或缺的角色的吧。

一、伪类选择器

1、什么是伪类选择器

伪类选择器，顾名思义，是一种特殊的选择器，它用来选择DOM元素在特定状态下的样式。这些特定状态并不是由文档结构决定的，而是由用户行为（如点击、悬停）或元素的状态（如被访问、被禁用）来定义的。

例如，我们可以用伪类选择器来改变链接在不同状态下的颜色，从而给用户以视觉反馈。

2、伪类选择器的语法

selector:pseudo-class {
  property: value;
}

a:link {
  color: #FF0000;
}

input:focus {
  background-color: yellow;
}

注意：伪类名称对大小写不敏感。

3、常用的伪类选择器

下面分别介绍一下比较常用几类伪类选择器：

3.1 动态伪类选择器

这类选择器主要用于描述用户与元素的交互状态。例如：

1）:hover： 当鼠标悬停在元素上时的样式。

代码示例：将链接的文本颜色改为红色

a:hover {
  color: red;
}

2）:active： 当元素被用户激活（如点击）时的样式。

代码示例：将按钮的背景色改为蓝色

button:active {
  background-color: blue;
}

3）:focus： 当元素获得焦点（如输入框被点击）时的样式。

代码示例：将输入框的边框颜色改为绿色

input:focus {
  border-color: green;
}

4）:visited： 用于设置已访问链接的样式，通常与:link一起使用来区分未访问和已访问的链接。

代码示例：将已访问链接的颜色改为紫色

a:visited {
  color: purple;
}

3.2 UI元素状态伪类选择器

这类选择器用于描述元素在用户界面中的状态。例如：

1）:enabled和:disabled： 用于表单元素，表示元素是否可用。

示例：将禁用的输入框的边框颜色改为灰色

input:disabled {
  border-color: gray;
}

2）:checked： 用于单选框或复选框，表示元素是否被选中。

示例：将选中的单选框的背景色改为黄色

input[type="radio"]:checked {
  background-color: yellow;
}

3）:nth-child(n)： 选取父元素中第n个子元素。

示例：将列表中的奇数位置的项目的背景色改为蓝色：

li:nth-child(odd) {
  background-color: blue;
}

3.4 否定伪类选择器

这类选择器用于排除符合特定条件的元素。例如：

:not(selector)： 选取不符合括号内选择器的所有元素。

示例：将不是段落的元素的背景色改为灰色：

*:not(p) {
  background-color: gray;
}

4、常见应用

设置鼠标悬停在元素上时的样式；
为已访问和未访问链接设置不同的样式；
设置元素获得焦点时的样式；

// 示例：a 标签的四种状态，分别对应 4 种伪类；

/* 未访问的链接 */
a:link {
  color: blue;
}

/* 已访问的链接 */
a:visited {
  color: red;
}

/* 鼠标悬停链接 */
a:hover {
  color: orange;
}

/* 已选择的链接（鼠标点击但不放开时） */
a:active {
  color: #0000FF;
}

注意：

a 标签的 4 个伪类(4种状态)必须按照一定顺序书写，否则将会失效；
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效；
a:active 必须在 CSS 定义中的 a:hover 之后才能生效；
书写顺序为：a:link、a:visited、a:hover、a:active；
记忆方法：love hate - “爱恨准则”；

二、伪元素选择器

1、什么是伪元素选择器

与伪类选择器不同，伪元素选择器是用来选择DOM元素的特定部分，而不是整个元素。它们通常用于处理那些不是由HTML标签直接表示的内容，比如首行文字、首字母或者生成的内容（如内容前面的编号）。

伪元素选择器允许我们对页面上的某些部分进行精确的样式控制，而这些部分在HTML结构中并不存在。

2、伪元素选择器语法

selector::pseudo-element {
  property: value;
}

p::first-line {
  color: #ff0000;
}

h1::before {
  content: '♥';
}

3、常用伪元素选择器

伪元素选择器并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，CSS中有如下四种常用伪元素选择器：first-line、 first-letter、 before、after。

3.1 ::first-line

::first-line表示第一行（第一行内容根据屏幕大小来决定显示多少字），例如：p::first-line{}。
代码示例：

    <style>
        p::first-line{
            color: blue;
        }
</style>

在这里插入图片描述

3.2 ::first-letter

::first-letter表示第一个字母，例如：p::first-letter{}。

代码示例：

<style>
        p::first-letter{
            font-size: 30px;
            color: blueviolet;
        }
</style>

在这里插入图片描述

3.3 ::before和::after

::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用。

代码示例：

 <style>
        p::after{
            content: "hahaha";
            color: red;
        }
        p::before{
            content: "hehehe";
            color: coral;
        }
</style>