层叠样式表 (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 创建一个伪元素, 该元素代表所选 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 伪元素 https://caniuse.com/#search=::after
除 Safari,Internet Explorer 9 和 Opera 外, 所有流行的浏览器都完全支持:: before 伪元素. https://caniuse.com/#search=::before
:: marker 伪元素 https://caniuse.com/#search=::marker 仅受 Firefox 支持
除了 iOS 设备上的 Safari 以外, 所有浏览器均支持:: first-letter 伪元素 https://caniuse.com/#search=::first-letter
每个屏幕尺寸的每个浏览器都完全支持:: first-line 伪元素 https://caniuse.com/#search=::first-line
除了 Internet Explorer, 所有浏览器均支持:: placeholder 伪元素 https://caniuse.com/#search=::placeholder .
所有网络浏览器均支持:: selection 伪元素 https://caniuse.com/#search=::selection
结论
CSS 仍然是现代 Web 开发过程中不可或缺的一部分. Web 开发人员花一些时间来学习 CSS 基础非常重要. CSS 中的伪元素将帮助您扩展知识, 并为您提供更多激动人心的样式选择.
来源: http://www.css88.com/web/css/13433.html