搜索

首页  >  文章  >  web前端  >  解释CSS中的嵌套和分组

解释CSS中的嵌套和分组

WBOY
WBOY转载
2023-08-23 12:25:061635浏览

解释CSS中的嵌套和分组

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

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

<!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进行嵌套的优势

以下是嵌套的主要优点：

  • 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.

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

Grouping in CSS

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

Syntax

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

Example

<!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中分组的优势

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

Nesting

分组

使用嵌套功能，您可以在一个样式规则中嵌套另一个样式规则，其中子规则的选择器与父规则的选择器相关。

通过分组功能，可以一次给多个选择器赋予相同的属性和值。

嵌套是一种管理和简化大量项目属性的技术，但是如果多个元素嵌套具有相同的值，可能会变得麻烦。像这样的嵌套功能可能难以控制。

将这些特性同时应用于多个不同的组件，使用分组是直接且可管理的。

如果我们需要编辑CSS中的特定元素的属性，例如父元素或子元素，在嵌套的情况下，我们必须手动为该元素进行编辑。

对于分组，我们只需要修改一个选择器的样式，它将应用于其他分组在一起的选择器。

结论

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

以上是解释CSS中的嵌套和分组的详细内容。更多信息请关注PHP中文网其他相关文章！

css html if for Error 堆 Property this 选择器 样式表
声明：
本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除
上一篇："font-family -apple-system是什么意思？"下一篇：如何借助CSS创建一个旋转木马？

相关文章

查看更多