CSS基础之伪元素选择器（如果想知道CSS的伪元素选择器知识点，那么只看这一篇就足够了！）

2024-04-20 11:01:10

前言：我们已经知道了在CSS中，选择器有基本选择器、复合选择器、伪类选择器、那么选择器学习完了吗？显然是没有的，这篇文章讲解最后一种选择器——伪元素选择器。

✨✨✨这里是秋刀鱼不做梦的BLOG

✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-****博客

那么废话不多说，先让我们看一下这篇文章讲解的内容：

伪元素选择器

（1）初始伪元素选择器

（2）伪元素的语法规范

（3）各个伪元素选择器

【1】first-letter

【2】first-line

【3】selection

【4】placeholder

【5】before + after

伪元素选择器

（1）初始伪元素选择器

在学习特定的伪元素选择器之前，让我们先来学习一下什么是伪元素选择器：

伪元素选择器是用来选择html标签种的特定部分，而不是整个标签里面的内容。它通常用于处理那些不是由HTML标签直接表示的内容，比如首行文字、首字母或者生成的内容等等。

总结：伪元素选择器就是对基本选择器或复合选择器的修饰，是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

（2）伪元素的语法规范

语法规范：

/* 在选择器之后加上:: */
selector::pseudo-element {
  /* 添加的样式 */
  property: value;
}

我们使用一个下面要学习的伪元素选择器来举一下例：（只需要看伪元素选择器的组成形式即可）

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.16.css">
</head>
<body>
    <!-- 将第一个字母的大小改为30px，并且颜色位橙色 -->
    <div>hello the world !</div>
</body>
</html>

CSS代码：

div::first-letter {
    font-size: 30px;
    color: orange;
}

从上边的代码中，我们可以更好的对伪元素选择器的语法规范进行理解。

注意：

一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的基础选择器/复合选择器之后。

备注：

按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

这样我们就了解了伪元素选择器的语法规范了，接下来开始学习各个伪元素选择器。

先让我们看一下常见的伪元素选择器有哪些：

（3）各个伪元素选择器

【1】first-letter

first-letter的作用：: :first-letter会选中某（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。

让我们直接使用案例来看一下：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.16.css">
</head>
<body>
    <!-- 将第一个字母的大小改为30px，并且颜色位橙色 -->
    <div>hello the world !</div>
</body>
</html>

CSS代码：

div::first-letter {
    font-size: 30px;
    color: orange;
}

这就是之前我们学习伪元素选择器语法的时候使用的案例，现在我们再来看一下，我们使用first-letter伪元素选择器将首字母变为了大小30px，颜色为橙色。

【2】first-line

first-line的作用：在某（块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

让我们直接使用案例来看一下：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.16.css">
</head>
<body>
    <!-- 将第一个行的大小改为20px，并且颜色位红色 -->
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt facilis velit ipsa itaque aut cupiditate incidunt eum suscipit, nulla adipisci?</div>
</body>
</html>

CSS代码：

div::first-line {
    font-size: 20px;
    color: red;
}

我们可以看到first-line伪元素选择器将第一行的字体大小变为了20px，颜色变为了红色。

【3】selection

selection的作用：selection伪元素选择器应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

让我们直接使用案例来看一下：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.16.css">
</head>
<body>
    <!-- 一段文字 -->
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste earum delectus laudantium commodi dolore odio quo voluptatum quae. Ipsam et ullam possimus delectus corporis eos, maiores libero distinctio eum laboriosam rerum, odio aliquam, minus repellat dolorum. Quaerat dolore corrupti ratione?</div>
</body>
</html>

CSS代码：

/* 选中的文字颜色会变为红色，背景色为天蓝色 */
div::selection {
    color: red;
    background-color: skyblue;
}

这样我们就学会了selection伪元素选择器的使用了。

【4】placeholder

placeholder的作用：::placeholder作用于<input>或<textarea>元素中的占位文本。

让我们直接使用案例来看一下：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.16.css">
</head>
<body>
    用户名：<input type="text" placeholder="请输入用户名">
    <br>
    密码：<input type="password" placeholder="请输入密码">
</body>
</html>

CSS代码：

/* 文本字体为橙色，切背景为天蓝色 */
input::placeholder {
    color: orange;
    background-color: skyblue;
}

这样我们就了解了placeholder伪元素选择器的使用。

【5】before + after

before / after的作用：before / after伪元素选择器会创建一个伪元素，其将成为匹配选中的元素的第一个 / 最后一个子元素，常通过 content属性来为一个元素添加修饰性的内容。

让我们直接使用案例来看一下：（我们使用before来做演示，after类似，只是位置不同）

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./2024.4.16.css">
</head>
<body>
    <div>199</div>
    <div>299</div>
    <div>399</div>
    <div>499</div>
</body>
</html>

CSS代码：

/* 在div的内容之前加上$符号 */
div::before {
    content: "$";
}

这样我们就学会了before伪元素选择器的使用，当然after与其类型，只不过位置为结尾。

以上就是本篇文章的所有内容了~~~

码农公寓

伪元素选择器

（1）初始伪元素选择器

（2）伪元素的语法规范

（3）各个伪元素选择器

【1】first-letter

【2】first-line

【3】selection

【4】placeholder

【5】before + after

相关文章