首页 >> 全栈工程 >>CSS >> css伪元素指南
详细内容

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中有七个伪元素。他们是:

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

1.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%; }

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

2.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; }

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

1.gif

浏览器兼容性

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

结论

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

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

ots网络logo

OTS网络安全门户主要提供网络信息安全教程、文章、工具,让更多的小伙伴加入我们的社区一起学习。

技术支持: 建站ABC | 管理登录