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>

正如我们在上面的例子中看到的，我们使用了自己的元素，如 < 标题> **和 **< 示例> **。代码被顺利地执行，文本被显示出来。然而，我们必须根据它们的样式。例如，如果我们使用HTML认可的元素（ **h1 ）而不是<heading>，文本将自动具有更大的字体大小。对于一个假的元素，我们必须用CSS来指定字体大小。

例子

在这个例子中，我们为伪元素< heading>和< example>声明了某些CSS属性。

<!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树中。然而，它们并不呈现任何功能或特殊性。