HTML 中的 * { 是什么意思?

htmlweb developmentfront end technology更新于 2024/12/11 2:20:17

概述

HTML(超文本标记语言)中的 * { 是一个通用符号，用于描述整个 HTML 文档。换句话说，我们可以说这个符号用于指向 HTML body 元素或 HTML DOM(即文档对象模型)。这个符号主要用于 CSS(层叠样式表)中，用于选择整个 HTML DOM 来反映对其的特定更改。在 CSS 中，我们通常使用类名、ID 名或标签名来定义一些 CSS 属性，但为了对页面进行常见的更改，我们可以使用此符号。

语法

以下是在 HTML 中使用上述符号的语法 -

*{
// 内容在此处
}

算法

创建一个 HTML 文档文件并在其中编写 HTML 样板代码。
现在在 HTML 文档正文中添加一些内容。

<h3> Tutorialspoint.com </h3>

现在在 HTML 头部使用内部样式表，并将 style 标签添加到文档中

<style></style>

使用上面的符号 *{ 作为选择器来选择 HTML DOM。

<style>
*{
// CSS 样式属性
}
<style>

现在向选择器添加一些 CSS 样式。

<style>
   *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      text-align: center;
      background-color: green;
      color: white;
   }
</style>

在浏览器中打开文件并查看结果。

示例

在本例中，我们将学习符号 *{ 的用法，因此我们将创建一个包含默认属性的 HTML 页面。我们将使用样式属性来重置样式属性。

<html>
<head>
    <title> use of *{ in HTML</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            text-align: center;
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <h3>Tutorialspoint.com</h3>
</body>
</html

当用户在浏览器中加载上述 HTML 文档时，屏幕上会显示一个绿色背景的窗口和"Tutorialspoint.com"文本，因为整个绿色背景是一个 HTML DOM，它被 *{ 标记。在标记此符号时，开发人员定义了一些样式属性，这些属性会反映到 body 的所有子元素上。

结论

使用此符号的优势在于，我们可以一次性将所有 CSS 样式定义到该属性上。我们无需定义并标记 DOM 的所有子元素。在整个场景中，*{ 符号充当 HTML DOM 的标签。在实际使用此符号时，开发人员可以使用它来重置页面的预定义 CSS。重置预定义样式意味着必须给页面一些边距或填充，这会干扰我们页面的用户界面，因此通过定义样式属性 tp *{ 它将覆盖页面的样式。