資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學解釋 CSS 中的巢狀和分組
在 CSS 中巢狀和分組有助於開發人員編寫簡短、精確且易於執行的程式碼。冗長的程式碼對開發人員來說總是弊大於利，因為它難以除錯，還會增加網頁的載入時間，降低網站的可讀性。
在本文中，我們將瞭解巢狀和分組、它們的優勢、它們的差異以及它們如何幫助減小程式碼大小、提高可讀性和使網站易於維護。
CSS 中的巢狀
CSS 中的巢狀屬性使開發人員能夠將一個特定的樣式規則巢狀在另一個樣式規則中，子規則的選擇器相對於父規則的選擇器。
在 CSS 巢狀中，巢狀順序很重要，例如：如果我們使用 **div p**，則樣式將應用於 p 元素內部的 div 標籤，如果我們反轉順序，例如 **p div**，則樣式將應用於 **div** 標籤內部的 **p** 標籤。
語法
class1_selector class2_selector id_selector{
property: value;
}
示例
在這個例子中，我們有一個在 div 元素外部的 p 元素，還有一個在 div 元素內部的 p 元素。在這裡，樣式僅使用巢狀應用於 div 元素內部的 p 元素。
<!DOCTYPE html>
<html>
<head>
<title>
Nesting in CSS
</title>
<style>
h1 {
color: #00FF00;
text-decoration: underline;
}
div p {
background-color: #04af2f;
color: white;
font-size: 20px;
letter-spacing: 1px;
}
</style>
</head>
<body>
<h3>Nesting In CSS</h3>
<p>
This text is written using p tag which has no
styles applied to it.
</p>
<div>
<p>
This text is written using p tag which
is inside a div element. This is the
example of Nesting in CSS.
</p>
</div>
</body>
</html>
CSS 巢狀的優勢
以下是 CSS 巢狀的主要優勢：
- **模組化和可維護性：**藉助巢狀，我們可以將相關的樣式分組在一個地方，減少程式碼重複，從而大大減少開發和除錯時間。
- **高效的媒體查詢：**巢狀消除了對每個選擇器都需要單獨媒體查詢規則的需求。這可以直接新增到宣告選擇器的位置。
- **減少程式碼：**藉助巢狀，我們可以將選擇器堆疊在其他選擇器內部，而不是為每個選擇器複製相同的特性集。這減少了程式碼和整體載入時間。
CSS 中的分組
CSS 中的分組將相同的樣式一次應用於多個元素。這減少了為每個元素建立標準樣式所需的程式碼和工作量。我們可以使用逗號 (,) 來分組各種元素。
語法
selector1, selector2, selector3…...selectorN {
property: value;
}
示例
在這個例子中，我們使用分組將通用屬性應用於 div、p、article 和 span 元素。
<!DOCTYPE html>
<html>
<head>
<title>
Grouping in CSS
</title>
<style>
div, p, article, span {
background-color: #04af2f;
color: white;
}
</style>
</head>
<body>
<h3>Grouping In CSS</h3>
<h4>
Here we have used Grouping of elements
to apply common style to each element.
</h4>
<p>This is a p element.</p>
<div>This is a div element.</div>
<br>
<span>This is a span element.</span>
<br><br>
<article>This is an article element.</article>
</body>
</html>
CSS 分組的優勢
以下是 CSS 分組的優勢：
- 它有助於縮短包含許多具有相同特性的選擇器的程式碼，避免 **重複** 並提高程式碼的 **可讀性**。使用分組時，頁面載入時間和程式碼開發時間都得到了改進。
- 如果程式碼中存在錯誤，您可以輕鬆地在一個選擇器中進行更改，它將應用於所有分組在一起的選擇器，從而提高程式碼的 **可維護性**。
巢狀和分組的區別
|
巢狀 |
分組 |
|---|---|
|
巢狀將樣式應用於父元素內的子元素。 |
分組將相同的屬性一次應用於多個元素。 |
|
巢狀是一種用於一次管理和簡化多個專案屬性的技術，但是如果更多具有相同值的元素巢狀在一起，它可能會變得麻煩。控制這樣的巢狀功能可能很困難。 |
使用分組一次將特性應用於多個不同的元件很簡單且易於管理。 |
|
多個選擇器由空格分隔，反映了 HTML 的層次關係。 |
多個選擇器由逗號分隔。 |
結論
雖然您可以始終單獨列出 CSS 樣式，但請記住，將樣式分組在一起可以節省空間並對選擇器進行分隔。分組使事情保持井然有序。巢狀將有助於樣式表的模組化和維護。這是因為巢狀允許將與選擇器相關的所有樣式、子/父選擇器甚至媒體查詢都巢狀在同一位置。
1K+ 次瀏覽
