|
css伪元素指南时间：2020-05-31 层叠样式表（css）是一种独立的语言，用于描述web应用程序的表示。这涉及到诸如颜色、字体和HTML元素布局的完全控制等概念。
在本文中，将为您介绍级联样式表中的伪元素，以及如何将它们与兼容性一起使用的实际示例。 css中的伪元素是什么？ CSS伪元素是添加到CSS选择器的关键字，可用于设置所选HTML元素的特定部分的样式。 在CSS3中，通常用两个冒号（例如::first-line）表示，以将它们与伪类区分开。 相反，CSS2语法使用一个冒号（例如:first-line）。 伪元素语法 CSS伪元素的一般语法如下所示： selector::pseudo-element { property: value; }它看起来就像普通的样式设置语句，但是使用冒号来指示要设置样式的选择器中包含的元素的特定部分。 CSS中的伪元素 目前css中有七个伪元素。他们是： 还有其他一些，但它们仍被认为是实验技术。 因此，在本文中，重点将放在主要的七个伪元素上。 工作演示 在本文中，将在一个简单的演示文件夹中向您介绍这些伪元素中的每一个。 要遵循，您将需要：
现在，创建一个文件夹，将其命名为伪，然后使用VS Code打开它。 创建两个文件：
将下面的启动代码复制到您的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; }如果您在浏览器中显示，它将看起来像这样：
浏览器兼容性 您可能想了解一些有关浏览器支持的伪元素的有用信息：
结论 CSS仍然是现代Web开发过程中不可或缺的一部分。 Web开发人员花一些时间来学习CSS基础非常重要。 CSS中的伪元素将帮助您扩展知识，并为您提供更多激动人心的样式选择。 原文地址：https://blog.logrocket.com/a-guide-to-css-pseudo-elements/ |
