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

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

在CSS中嵌套

The nesting property in CSS enables the developers to nest one specific style rule within another, with the child rule's selector relative to the parent rule's selector.

Syntax

class1_selector class2_selector id_selector{
   CSS declarations;
}

Example

   
   


   
Tutorialspoint
   
Computer Programming
   
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.
立即学习“前端免费学习笔记（深入）”；

使用CSS进行嵌套的优势

以下是嵌套的主要优点：

• Nesting helps in creating more modular and maintainable stylesheets. Rather than having the same selector in multiple places in a stylesheet, you can group all styles related to that selector in one place. This will drastically reduce development and debugging time. For instance, if you design an organised CSS module, you may simply give attributes to selections within other selects rather of giving distinct selectors for each HTML element, such as by utilising various classes or ID selectors.

• It enables the nesting of media queries. Nesting eliminates the requirement for a distinct media query rule for each selection. This can be added immediately where the selector was declared.

  

  mallcloud商城

  mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提

  下载

• 当CSS属性嵌套在HTML组件中时，会产生树状形状。使用嵌套方法可以快速创建大量选择单个属性的CSS规则。因此，我们可以简单地将选择器堆叠在其他选择器内，而不是为每个选择器复制相同的特性集。因此，我们在代码数量和加载时间上都有所减少。

Grouping in CSS

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

Syntax

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

Example

   
   


   
Tutorialspoint
   
Computer Programming
   
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. 

CSS中分组的优势

Following are the advantages of grouping in CSS –

• 它有助于缩短包含许多具有相同特征的选择器的代码。这使得代码更易读。使用分组时，页面加载时间和代码开发时间都会降低。

• If there is an error in the code, you can easily make changes in one selector and it will be applied to all the selectors grouped together.

Difference between Nesting and Grouping

结论

尽管您总是可以将CSS样式单独列出，但请记住，将样式分组在一起可以节省空间并将选择器分隔开。通过分组，可以保持组织有序。嵌套将有助于样式表的模块化和维护。这是由于嵌套，它允许将与选择器相关的所有样式，子/父选择器甚至媒体查询嵌套在同一位置。