首页 > 文章 > web前端 > 为什么 CSS 可以使用假元素？

为什么 CSS 可以使用假元素？

WBOY转载: 2023-08-30 15:01:02463浏览

为什么 CSS 可以使用假元素？

作为前端开发人员，您应该熟悉 CSS 伪元素，包括它们的功能以及各种表示和结构应用。基本的 CSS 选择器及其众多属性使用起来很有趣，但了解伪类和伪元素是成为 CSS 专家的下一步。

除了CSS伪元素之外，还有一些HTML元素通常被称为假元素。 CSS 有时使用它来轻松处理并允许开发人员在网页中创建自定义元素。然而，它们没有标准化，因此不能在全球范围内使用。

在本文中，我们将讨论为什么 CSS 可以与假元素一起使用？本文首先解释什么是假元素、我们为什么使用它们、它们如何工作以及假元素的许多其他基本方面。

什么是假元素？

未在 HTML 文档中定义的 HTML 元素称为假元素。制造假元件是可行的。您可以为元素指定任何您选择的名称，但不建议这样做。 HTML 使开发人员能够在网页中使用自定义元素。该元素将在您的页面中顺利运行。

示例

查看以下示例以了解如何在 HTML 文档中使用 Fake 元素。

<!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) 而不是，文本将自动具有更大的字体大小。要对假元素执行此操作，我们必须使用 CSS 指定字体大小。

示例

在此示例中，我们已向伪元素和声明了某些 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 树中。然而，它们不具有任何功能或特殊性。

为什么我们不应该使用假元素？

虽然假元素在网页中可以正常工作，但强烈建议不要在 HTML 文档中使用假元素。以下是我们不应该使用假元素的一些原因 -

HTML 规范不支持和识别这些虚假元素。
这些元素没有指定的功能。就像
中的文本具有预定义的字体大小一样，假元素无法访问此类功能。
它们可能会阻碍未来标准元素（如果已开发）的功能，这些元素与假元素同名。
随着 HTML 版本的快速修改，DOM 中可能存在最适合该特定功能的特定标准元素。
这些标签可能会在不同浏览器中出现兼容性问题。此外，浏览器渲染标准元素的速度更快。这样，您的网页就会顺利运行。
标准 HTML 元素提供各种优势，例如 SEO（搜索引擎优化）和速度。它们是 Google 等流行浏览器的首选。
使用虚假元素表明缺乏专业精神（对于某些开发人员而言）。标准元件易于维护。此外，它还允许进一步修改（如果需要）。
使用标准 HTML 元素将使调试更加容易。这是因为调试工具可以轻松访问标准元素。

结论

可以在 HTML 文档中创建您自己的元素。然而，它们没有任何附加的语义或功能。此外，这些元素无法被所有开发人员全局理解或使用。因此，最好使用标准 HTML 元素，这比假元素具有多种优势。

以上是为什么 CSS 可以使用假元素？的详细内容。更多信息请关注PHP中文网其他相关文章！

css html dom 选择器伪类伪元素搜索引擎 SEO

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：使用哪个属性使字体倾斜？下一篇：什么是 CSS 列以及如何填充它？

查看更多