解释 CSS 中的嵌套和分组

在网页设计中，开发人员编写简短、精确且易于运行的代码非常重要。冗长的代码对开发人员来说总是不利的，因为它会增加网页的加载时间，从而降低网站的可读性。此外，开发人员调试代码也会变得非常困难。

CSS 提供了嵌套和分组等功能，使开发人员能够编写精确的代码。这有助于保持代码的简洁性和可读性。此外，由于代码长度的减少，运行时间以及页面的加载时间也会减少，从而吸引用户的注意力。这提高了网站的可读性。在本文中，我们将讨论 CSS 中嵌套和分组的概念。

CSS 中的嵌套

CSS 中的嵌套属性使开发人员能够将一个特定的样式规则嵌套在另一个样式规则中，子规则的选择器相对于父规则的选择器。

语法

class1_selector class2_selector id_selector{
   CSS declarations;
}

示例

<!DOCTYPE html>
<html>
<head>
   <title>Nesting in CSS</title>
   <style>
      *{
         text-align: center;
      }
      h1{
         color: #00FF00;
         text-decoration: underline;
      }
      p span{
         color: blue;
         font-size: 18px;
         letter-spacing: 1px;
         font-weight: bold;
         font-family: cursive;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <h2>Computer Programming</h2>
   <p>The process of carrying out a given computation (or, more broadly, achieving a specified computing result) through the design and construction of an executable computer programme is known as computer programming. Analysis, algorithm generation, resource use profiling, and algorithm implementation are some of the duties involved in programming (usually in a chosen programming language, commonly referred to as coding). <span> Instead of being written in machine code, which is immediately executed by the CPU, a programme is written in one or more languages that are understandable to programmers. </span> Finding a set of instructions that will automate the completion of a task—which may be as complicated as an operating system—on a computer is the goal of programming, which is frequently done to address a specific issue.</p>
</body>
</html>

CSS 嵌套的优势

嵌套的主要优势如下 –

• 嵌套有助于创建更模块化、更易于维护的样式表。与其在样式表中的多个位置使用相同的选择器，不如将所有与该选择器相关的样式分组到一个位置。这将大大减少开发和调试时间。例如，如果您设计了一个有序的 CSS 模块，您可以简单地为其他选择中的选择赋予属性，而不必为每个 HTML 元素赋予不同的选择器(例如通过使用各种类或 ID 选择器)。

• 它支持媒体查询的嵌套。嵌套消除了为每个选择项指定不同的媒体查询规则的要求。嵌套可以在声明选择器的位置立即添加。

• 当 CSS 属性嵌套在 HTML 组件中时，会形成树状结构。使用嵌套方法可以快速创建针对单个属性的大量选择的 CSS 规则。因此，我们可以简单地将选择器堆叠在其他选择器中，而无需为每个选择器复制相同的特性集。这样一来，我们既减少了代码量，也减少了整体加载时间。

CSS 中的分组

要同时选择和设置多个元素的样式，请使用 CSS 分组选择器。这样可以减少为每个元素创建标准样式所需的代码量和工作量。为了对它们进行分组，每个选择之间使用一个空格。

语法

selector1, selector2, selector3…...selectorN {
   CSS declarations;
}

示例

<!DOCTYPE html>
<html>
<head>
   <title> Grouping in CSS </title>
   <style>
      *{
         text-align: center;
      }
      h1{
         color: #00FF00;
         text-decoration: underline;
      }
      h2{
         color: red;
      }
      h1, h2{
         font-family: Times New Roman, sans-serif;
         letter-spacing: 1px;
         font-weight: 900;
      }
      h2, p{
         margin: 5px;
         padding: 10px 5px 10px 10px;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <h2>Computer Programming</h2>
   <p>The process of carrying out a given computation (or, more broadly, achieving a specified computing result) through the design and construction of an executable computer programme is known as computer programming. Analysis, algorithm generation, resource use profiling, and algorithm implementation are some of the duties involved in programming (usually in a chosen programming language, commonly referred to as coding). Instead of being written in machine code, which is immediately executed by the CPU, a programme is written in one or more languages that are understandable to programmers. Finding a set of instructions that will automate the completion of a task—which may be as complicated as an operating system—on a computer is the goal of programming, which is frequently done to address a specific issue. </p>
</body>
</html>

CSS 分组的优势

CSS 分组的优势如下 –

• 分组有助于缩短包含大量相同特性选择器的代码，从而更易于阅读。使用分组功能可以缩短页面加载时间和代码开发时间。

• 如果代码出现错误，您可以轻松更改一个选择器，该更改将应用于所有分组的选择器。

嵌套和分组的区别

结论

虽然您可以单独列出 CSS 样式，但请记住，将样式分组可以节省空间并区分选择器。分组可以使内容保持井然有序。嵌套有助于样式表的模块化和维护。这是由于嵌套允许将与选择器、子/父选择器甚至媒体查询关联的所有样式嵌套在同一位置。

相关文章

• 使用 CSS Animation 为 transform 属性添加动画
• CSS word-spacing 属性动画
• CSS width 属性动画
• CSS outline-color 动画
• CSS text-decoration-color 属性动画
• 在 CSS perspective-origin 属性上执行动画
• CSS text-shadow 属性动画
• CSS text-indent 属性动画
• CSS top 属性动画
• CSS outline-offset 属性动画

有用资源

• css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/