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中为一个特定的元素（如父元素或子元素）编辑一个属性，在嵌套的情况下，我们必须为该元素手动进行编辑。	而对于分组，我们只需要修改一个选择器的样式，它就会被应用到其他被分组的选择器上。