解釋CSS中的嵌套和分組-css教學-PHP中文網

首頁

web前端

css教學

解釋CSS中的嵌套和分組

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 23, 2023 pm 12:25 PM

解釋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 id="Tutorialspoint">Tutorialspoint</h1>
   <h2 id="Computer-Programming">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 stylesheet, you can group all styles related to that selector in stylesheet, you can group all styles related to that selector in one placedrallys timed . 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 utiing various class or#.
當CSS屬性嵌套在HTML元件中時，就會產生樹狀形狀。使用嵌套方法可以快速建立大量選擇單一屬性的CSS規則。因此，我們可以簡單地將選擇器堆疊在其他選擇器內，而不是為每個選擇器複製相同的特性集。因此，我們在程式碼數量和載入時間上都有所減少。
Grouping in 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 id="Tutorialspoint">Tutorialspoint</h1>
   <h2 id="Computer-Programming">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樣式單獨列出，但請記住，將樣式分組在一起可以節省空間並將選擇器分隔開。透過分組，可以保持組織有序。嵌套將有助於樣式表的模組化和維護。這是由於嵌套，它允許將與選擇器相關的所有樣式，子/父選擇器甚至媒體查詢嵌套在同一位置。

#分組
透過分組功能，可以一次給予多個選擇器相同的屬性和值。
將這些特性同時應用於多個不同的元件，使用分組是直接且可管理的。
對於分組，我們只需要修改一個選擇器的樣式，它將套用於其他分組在一起的選擇器。