数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究为什么 CSS 可以与伪元素一起工作？
作为一名前端开发者，您应该熟悉 CSS 伪元素，包括其功能以及各种表现和结构应用。基本的 CSS 选择器及其众多属性使用起来很有趣，但理解伪类和伪元素是成为 CSS 专家迈出的下一步。
除了 CSS 伪元素之外，还有一些 HTML 元素通常被称为伪元素。CSS 有时会使用它们来方便处理，并允许开发人员在网页中创建自定义元素。但是，它们没有标准化，因此不能全局使用。
在本文中，我们将讨论为什么 CSS 可以与伪元素一起工作？从解释什么是伪元素、为什么要使用它们、它们如何工作以及伪元素的许多其他基本方面开始本文。
什么是伪元素？
HTML 文档中未定义的 HTML 元素称为伪元素。创建伪元素是可行的。您可以为您的元素选择任何名称，但这并不推荐。HTML 允许开发人员在网页中使用自定义元素。该元素将在您的页面中顺利运行。
示例
请查看以下示例，了解如何在 HTML 文档中使用伪元素。
<!DOCTYPE html>
<html>
<head>
<title> Fake Elements </title>
<style>
*{
background-color: grey;
margin: 5px;
letter-spacing: 1px;
}
.para{
font-family: cursive;
}
</style>
</head>
<body>
<section>
<heading> Programming Languages </heading>
<p class= "para"> To communicate with computers, programmers (developers) use a programming language, which is a computer language. It is a set of instructions written in a specific language (such as C, C++, Java, or Python), built to do a certain task. </p>
<example> Some of the most popular programming languages are: </example> <br>
<p>
<ol>
<li> <h1> C/C++ </h1> </li>
<li> <h1> Java </h1> </li>
<li id= "demo"> <h1> Python </h1> </li>
<li> <h1> JavaScript </h1> </li>
<li> <h1> PHP </h1> </li>
</ol>
</p>
</section>
</body>
</html>
如上例所示，我们使用了自己的元素，如 <heading> 和 <example>。代码顺利执行，并且显示了文本。但是，我们必须相应地为其设置样式。例如，如果我们使用 HTML 识别的元素 (h1) 而不是 <heading>，则文本将自动具有更大的字体大小。要对伪元素执行此操作，我们必须使用 CSS 指定字体大小。
示例
在此示例中，我们已将某些 CSS 属性声明为伪元素 <heading> 和 <example>。
<!DOCTYPE html>
<html>
<head>
<title> Fake Elements </title>
<style>
*{
background-color: yellow;
margin: 5px;
letter-spacing: 1px;
}
heading{
color: black;
text-decoration: underline;
text-shadow: 4px 4px 4px grey;
font-size: 28px;
}
.para{
font-family: cursive;
}
example{
color: red;
font-weight: 900;
}
</style>
</head>
<body>
<section>
<heading> <h1 class= "head"> Programming Languages </h1> </heading>
<p class= "para"> Programmers (developers) utilise a programming language, which is a computer language, to communicate with computers. It is a set of guidelines created in any particular language (C, C++, Java, Python), developed to carry out a certain task. </p>
<example> Some of the most popular programming languages are: </example> <br>
<p>
<ol>
<li> <h1> C/C++ </h1> </li>
<li> <h1> Java </h1> </li>
<li id= "demo"> <h1> Python </h1> </li>
<li> <h1> JavaScript </h1> </li>
<li> <h1> PHP </h1> </li>
</ol>
</p>
</section>
</body>
</html>
我们已向伪元素添加了 CSS 样式。代码顺利执行，并且样式没有任何问题。问题出现了，这些伪元素如何在 HTML 文档中工作？
答案是：随着 HTML 功能的不断发展，大多数现代浏览器已兼容其功能的许多更改或添加。因此，未识别的元素会直接解析到 DOM 树中。但是，它们不会呈现任何功能或特性。
为什么我们不应该使用伪元素？
尽管伪元素在网页中可以正常工作，但强烈建议不要在 HTML 文档中使用伪元素。以下是我们不应该使用伪元素的一些原因：
HTML 规范不支持和识别这些伪元素。
这些元素没有指定的功能。例如，<header> 内的文本具有预定义的字体大小，而伪元素无法访问此类功能。
它们可能会阻碍将来标准元素（如果开发）的功能，这些元素与伪元素具有相同的名称。
随着 HTML 版本的快速修改，有可能 DOM 中存在一个特定的标准元素，该元素最适合该特定功能。
这些标签可能会在不同的浏览器中导致兼容性问题。此外，浏览器渲染标准元素的速度更快。因此，您的网页将顺利运行。
标准 HTML 元素提供了各种优势，例如 SEO（搜索引擎优化）和速度。它们是 Google 等流行浏览器所青睐的。
使用伪元素表明缺乏专业性（对于某些开发人员而言）。标准元素易于维护。此外，它允许进一步修改（如果需要）。
使用标准 HTML 元素将使调试更容易。这是因为标准元素可以通过调试工具轻松访问。
结论
可以在 HTML 文档中创建自己的元素。但是，它们没有任何附加的语义或功能。此外，这些元素不能被所有开发人员全局理解或使用。因此，最好使用标准 HTML 元素，它提供了优于伪元素的各种优势。
136 次查看
