【CSS】457- CSS 伪元素指南

层叠样式表（css）是一种独立的语言，用于描述web应用程序的表示。这涉及到诸如颜色、字体和HTML元素布局的完全控制等概念。

在本文中，将为您介绍级联样式表中的伪元素，以及如何将它们与兼容性一起使用的实际示例。

css中的伪元素是什么？

CSS伪元素是添加到CSS选择器的关键字，可用于设置所选HTML元素的特定部分的样式。在CSS3中，通常用两个冒号（例如::first-line）表示，以将它们与伪类区分开。相反，CSS2语法使用一个冒号（例如:first-line）。

伪元素语法

CSS伪元素的一般语法如下所示：

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

它看起来就像普通的样式设置语句，但是使用冒号来指示要设置样式的选择器中包含的元素的特定部分。

CSS中的伪元素

目前css中有七个伪元素。他们是：

::after
::before
::first-letter
::first-line
::marker
::placeholder
::selection

还有其他一些，但它们仍被认为是实验技术。因此，在本文中，重点将放在主要的七个伪元素上。

工作演示

在本文中，将在一个简单的演示文件夹中向您介绍这些伪元素中的每一个。要遵循，您将需要：

代码编辑器-推荐Visual Studio Code
用于提供HTML代码的实时服务器。您可以在VS Code中下载一个。首先，转到扩展标签。您会在收藏夹扩展列表旁边看到搜索栏。搜索“实时服务器”（下载量将近500万）

现在，创建一个文件夹，将其命名为伪，然后使用VS Code打开它。创建两个文件：

index.html：这是我们用于内容的HTML代码的去向
main.css：这是进行样式设置的地方

将下面的启动代码复制到您的index.html文件中：

<!DOCTYPE html>
<html lang=”en”><head><meta charset=”UTF-8"><meta name=”viewport” content=”width=device-width, initial-scale=1.0"><meta http-equiv=”X-UA-Compatible” content=”ie=edge”><title>Document</title><link rel=”stylesheet” type=”text/css” href=”main.css”></head><body><p>hello world!</p></body>
</html>

粗体代码显示我们已将内容链接到样式表-在您的示例中是main.css。接下来，将此测试样式复制到main.css文件中进行测试：

p{
color: aqua;
}

如果单击VS Code应用程序页脚中的“上线”按钮，您将被重定向到默认浏览器，在该浏览器中已为您启动了托管该网页的实时远程服务器。

:: after (:after)

:: after创建一个伪元素，该元素代表所选HTML元素的最后一个子元素。它用于与CSS content属性协作将样式添加到此特定元素。语法如下所示：

selector::after {content: "value";
}

将下面的代码复制到index.html文件：

<!DOCTYPE html>
<html lang=”en”><head><meta charset=”UTF-8"><meta name=”viewport” content=”width=device-width, initial-scale=1.0"><meta http-equiv=”X-UA-Compatible” content=”ie=edge”><title>Document</title><link rel=”stylesheet” type=”text/css” href=”main.css”></head><body><p class=”one”>This is my very first paragraph.This is my very first paragraph.This is my very first paragraph.This is my very first paragraph.</p><p class=”three”>This is my second paragraph.</p><p class=”two”>This is my last but not the least paragraph</p></body>
</html>

现在，在您的main.css文件中，复制以下代码：

.one::after {content: “ — 1”;color: blue;
}
.two::after {content: “ — 2”;color: red;
}

这只是将字符串添加到所选元素之前（在本例中为指向各个段落的类），并更新其颜色。

::before (:before)

:: before创建一个伪元素，该元素代表所选HTML元素的第一个子元素。默认情况下，它是内联的，用于与CSS content属性协作将样式添加到此特定元素。语法如下所示：

selector::before {content: "value";
}

您的index.html文件将保持不变，但是在main.css文件中，复制以下代码：

.one::before {
content: “1--”;
color: blue;
}
.two::before {
content: “2--”;
color: red;
}

这只是将字符串添加到所选元素之前（在本例中为指向各个段落的类），并更新其颜色。

::first-letter (:first-letter)

::first-letter创建一个伪元素，表示一个块元素第一行的第一个字母，只要它不在图像或表格之后。

selector::first-letter {property: value;
}

然而，重要的是要认识到元素的第一个字母很难识别。像标点符号这样的东西在逻辑上可以算作第一个字母。有些语言的有向图总是大写在一起，比如荷兰语中的ij。在这些情况下，有向图的两个字母都应该与::first-letter伪元素匹配。

::before伪元素与content属性一起也可以创建第一个元素，因此在调试CSS时请牢记这些。

将以下样式代码复制到main.css文件中，以查看::first-letter的作用：

p::first-letter {color: red;font-size: 130%;
}

::first-line (:first-line)

::first-line创建一个伪元素，该伪元素代表block元素的第一行。就像第一个字母一样，第一行也取决于一些因素，例如元素的宽度，文档的宽度以及元素的字体大小。 ::first-line伪元素的语法如下：

selector::first-line {property: value;
}

将以下样式复制到您的main.css文件中：

p {
font-size: 130%;
}
p::first-line {
color: red;
font-size: 130%;
}

第一个段落样式将放大段落的字体，以便从给定的字符串中获得一行。

::marker

::marker伪元素选择列表项的标记框，该列表框通常包含项目符号或数字。它用于列表项和摘要元素。语法如下所示：

selector ::marker {property: value;
}

将下面的列表项代码添加到您的index.html文件中：

<ul><li>One</li><li>Two</li><li>Three</li>
</ul>

将以下::marker样式复制到main.css文件中，以查看其作用：

ul li::marker {color: blue;font-size: 130%;
}

::placeholder

::placeholder伪元素指向演示文稿中输入元素的占位符，通常在表单中找到。默认情况下，大多数浏览器会将浅灰色应用于占位符。语法如下所示：

selector ::placeholder {property: value;
}

将此输入行复制到您的index.html文件中：

<input placeholder="Type something here!">

将以下样式复制到main.css文件中以查看更改：

input::placeholder {color: red;font-size: 1.2em;font-style: italic;
}

::selection

::selection伪元素适用于DOM上突出显示的元素。语法如下所示：

selector ::selection {property: value;
}

::selection伪元素上可以使用一些属性：color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color, 和text-shadow.

将以下样式复制到您的main.css文件中：

p::selection {background-color: red;
}

如果您在浏览器中显示，它将看起来像这样：

浏览器兼容性

您可能想了解一些有关浏览器支持的伪元素的有用信息：

除Safari和Opera外，所有流行的浏览器都完全支持:: after伪元素
除Safari，Internet Explorer 9和Opera外，所有流行的浏览器都完全支持:: before伪元素。
:: marker伪元素仅受Firefox支持
除了iOS设备上的Safari以外，所有浏览器均支持:: first-letter伪元素
每个屏幕尺寸的每个浏览器都完全支持:: first-line伪元素
除了Internet Explorer，所有浏览器均支持:: placeholder伪元素。
所有网络浏览器均支持:: selection伪元素

结论

CSS仍然是现代Web开发过程中不可或缺的一部分。Web开发人员花一些时间来学习CSS基础非常重要。CSS中的伪元素将帮助您扩展知识，并为您提供更多激动人心的样式选择。

原文地址：https://blog.logrocket.com/a-guide-to-css-pseudo-elements/

▼

原创系列推荐

▼

1. JavaScript 重温系列（22篇全）

2. ECMAScript 重温系列（10篇全）

3. JavaScript设计模式重温系列（9篇全）

4. 正则 / 框架 / 算法等重温系列（16篇全）

5. Webpack4 入门（上）|| Webpack4 入门（下）

6. MobX 入门（上） || MobX 入门（下）

7. 59篇原创系列汇总

回复“加群”与大佬们一起交流学习~

点这，与大家一起分享本文吧~

【CSS】457- CSS 伪元素指南相关推荐

[css] 如何使用伪元素实现增大点击热区来增加用户体验？
[css] 如何使用伪元素实现增大点击热区来增加用户体验? .extend-via-pseudo-elem {position: relative; }.extend-via-pseudo-elem: ...
CSS 中的伪元素是什么，有什么用处
CSS 中的伪元素是一种特殊的元素,它们不是 HTML 元素,但通过 CSS 属性和关系运算符,我们可以为它们指定与实际 HTML 元素相同的样式.伪元素可以用于实现一些特殊的效果,比如动画.阴影.弹 ...
并不简单的翻页时钟（一）：样式篇（Flex布局、line-height、data-set用法、css before after伪元素）
目录并不简单的翻页时钟我以为的翻页时钟实际上的翻页时钟关键的知识点效果展示代码解析 HTML CSS 详解CSS 1.display:flex 元素居中 2.:before .:after ...
css伪元素覆盖,CSS :befor :after 伪元素的巧妙用法
本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...
CSS before / after伪元素
CSS伪类对象 after和before的用法 IE对after.before是不支持的,请在firefox.opera.chrome下试调! :before 语法:Selector : before ...
HTML与CSS基础之伪元素(五)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>伪元素 ...
Python攻城师的成长————css语法、伪元素选择器（部分）
今日学习目标熟悉并掌握css中各种修改属性的方法. 文章目录今日学习目标学习内容一.伪元素选择器 css操作文本内容选择器优先级二.css修改属性 css修改文字属性 css修改字体属性 ...
CSS如何使用伪元素选择器给所有的div里的文本前面添加小写罗马数字编号
一.需求说明假设现在我有三个div标签,它们在浏览器里显示的内容如下图所示: 我希望使用CSS给它们全部添加上序号,添加好序号后的样子如下图所示: 可以看到序号是递增的,不是普通的阿拉伯数字,而是小 ...
CSS之通过伪元素添加图标字体
这里使用的是Font Awesome图标字体库通过伪元素设置图标字体: 1.找到要设置图标的元素通过before或after选中 2.在content中设置字体的编码 3.设置字体的样式 fab: ...

【CSS】457- CSS 伪元素指南

【CSS】457- CSS 伪元素指南相关推荐

最新文章

热门文章