原文地址：https://mp.weixin.qq.com/s/3zLfon7iREGcehRq4f4wHQ

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

xuehuayu.cn

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

css中的伪元素是什么？

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

伪元素语法

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

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

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

CSS中的伪元素

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

  1. ::after

  2. ::before

  3. ::first-letter

  4. ::first-line

  5. ::marker

  6. ::placeholder

  7. ::selection

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

工作演示

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

  • 代码编辑器-推荐Visual Studio Code

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

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

  1. index.html：这是我们用于内容的HTML代码的去向

  2. 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应用程序页脚中的“上线”按钮，您将被重定向到默认浏览器，在该浏览器中已为您启动了托管该网页的实时远程服务器。

1572484728777750.jpg

:: 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%;
}

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

1572485350624491.jpg

::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;
}

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

1572485813541921.gif

浏览器兼容性

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

结论

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

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

以上就是css伪元素指南的详细内容，更多请关注html中文网其它相关文章！