如何在 Web 應用程序中使用本機 CSS 嵌套
從歷史上看，CSS 一直是一種很難使用的語言。 CSS 預處理器使 CSS 的使用變得更加容易，並且還提供了循環、混合等附加功能。多年來，CSS 變得越來越強大，並採用了 CSS 預處理器最初引入的一些功能。其中一項功能是“嵌套樣式”。
CSS 規則的嵌套使開發人員能夠在彼此之間嵌入 CSS 規則，從而有助於以可視化方式表示 HTML 元素及其各自的樣式之間的相關性。結果是改進了代碼的組織結構和可讀性，並清楚地描述瞭如何基於 HTML 層次結構分層應用樣式。
嵌套樣式:老方法
嵌套樣式是一種可以在 Sass、Stylus 和 Less CSS 等多種 CSS 預處理器中找到的功能。雖然它們的語法可能有所不同，但它們具有共同的基礎。例如，如果希望將樣式應用到類名為“container”的元素中的所有元素，則標準 CSS 代碼將如下所示:
.container {
background-color: #f2f2f2;
}
.container h1 {
font-size: 44px;
}
16 像素；在他們的預處理器代碼中。這樣可以實現有組織且高效的樣式，可以輕鬆適應網頁上的不同元素。
.container{
background-color: #f2f2f2;
h1 {
font-size:44px;
}
}
上述代碼片段展示了與傳統 CSS 類似的結果，同時促進了仔細閱讀源代碼的開發人員的理解和清晰度。這種“層次結構”的概念被認為是 CSS 預處理器的一個顯著優勢。
雖然樹結構中的嵌套深度沒有限制，但在創建深度嵌套元素時務必小心謹慎，因為這種做法可能會增加代碼複雜性和冗長性。
CSS 中的原生嵌套樣式
並非所有瀏覽器都支持本機嵌套樣式。 Can I use… 網站可以幫助您檢查您的目標瀏覽器是否支持此功能。
本機 CSS 中的嵌套樣式功能與 CSS 預處理器中的嵌套樣式類似，可以將任何選擇器封裝在另一個選擇器中。然而，認識到這兩種方法之間的本質區別至關重要。考慮以下示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nested Styling in CSS</title>
</head>
<body>
<div class="container">
<h1>Hello from the children of planet Earth!</h1>
</div>
<style>
.container {
background-color: red;
h1 {
color: yellow;
}
}
</style>
</body>
</html>
在提供的代碼片段中，類屬性為“container”的 div 元素擁有深紅色背景陰影。標題組件的設計特徵包含在上述 div 實體的範圍內。具體來說，標題成分呈現出檸檬色調的色素沉著。然而，當通過互聯網瀏覽器執行時，人們可能會發現元素的視覺表示存在不一致。儘管瀏覽器準確地為上述 div 賦予了紅色背景，但標題似乎缺乏必要的視覺裝飾。
在 CSS 中，樣式的嵌套操作與 CSS 預處理器（例如 Less）中的操作不同。直接引用嵌套層次結構中的 HTML 元素是不可能的。但是，可以使用與號 (&) 符號來解決此問題，如提供的示例中所示。
.container {
background-color: red;
& h1 {
color: yellow;
}
}
在“h1”名稱之前合併＆符號（“&”）作為父選擇器的指示，從而指定駐留在包圍“div”組件內的所有後代“h1”元素的目標。在網絡瀏覽器中執行此代碼將導致顯示連續垂直排列的多個“h1”標題，每個標題後面都有相應的文本段落。
考慮到“&”作為標識父元素的符號，可以通過如下方式選擇性地尋址元素的偽類和偽元素:
.parent1{
&:hover{
background-color: red;
}
&::before{
content:"Here is a pseudo element.";
}
}
嵌套媒體查詢
在 CSS 嵌套出現之前，為了實現基於瀏覽器寬度的條件樣式，人們不得不使用一種技術，例如前面提到的:
p {
color:black;
}
@media (min-width:750px) {
p {
color:gray;
}
}
當網絡瀏覽器處理頁面併計算其尺寸時，它會根據瀏覽器窗口的大小確定段落元素的色調。如果瀏覽器的寬度超過 750 像素，則使用灰色陰影作為標籤的背景顏色；相反，如果寬度低於此閾值，則將應用預定義的黑色。
事實上，雖然這種方法可能有效地發揮作用，但它可能會導致代碼激增，變得越來越麻煩，特別是在嘗試根據特定標準實現各種風格上的細微差別時。幸運的是，隨著將####媒體查詢直接封裝在單個元素的樣式屬性中的能力的出現，人們可以以一種更簡潔和有凝聚力的方式簡化和鞏固其表示邏輯。
p {
color:black;
@media (min-width:750px) {
color:gray;
}
}
與之前的版本相比，當前的實現提供了一種更直接的方法，其特點是增強了可讀性，使用戶能夠根據媒體查詢和周圍父元素的結構來辨別瀏覽器的樣式應用。
使用 CSS 嵌套樣式設計網站
必須應用迄今為止通過構建基本網站並利用 CSS 中的分層樣式功能所獲得的知識。要啟動此過程，請建立一個目錄並為其分配您選擇的標題。在此目錄中，生成兩個文件-“index.html”和“style.css”。
在主 HTML 文件中，必須包含為網頁提供基本結構和功能的佔位符或骨架代碼。該模板通常稱為“樣板”代碼，為頁面上的其餘元素奠定了基礎。它包括正確呈現和交互所需的標準組件，例如標題、元標記、樣式表和腳本。通過將這些基本代碼合併到index.htm 文件中，開發人員可以確保所有頁面的一致性，並通過避免重複任務來簡化其工作流程。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Simple Website</title>
</head>
<body>
<div class="container">
<div class="article">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
<div class="meta-data">
<span class="author">David Uzondu</span>
<span class="time">3 hours ago</span>
</div>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo ut
quasi hic sint dolorum sapiente magni ratione? Suscipit commodi ad,
asperiores nostrum natus aperiam et alias, officiis dolorum ipsa vero
minima consequatur recusandae quasi aliquid quibusdam ducimus eaque!
Excepturi voluptas eveniet nemo, earum doloribus, soluta architecto
iste repellat autem aspernatur beatae ut quis odio est voluptates sunt
qui rerum blanditiis minus! Rerum labore nobis, odit quod amet dolorum
quae laudantium.
</div>
</div>
<div class="sidebar">
<h2>Trending Articles</h2>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, iusto ipsum!</h4>
</div>
</div>
</body>
</html>
此代碼塊之前的代碼塊描述了仿新聞廣播網站的格式。因此，訪問 style.css 文檔並將隨後的指令附加到其中:
.container {
display: flex;
gap: 25px;
@media(max-width:750px) {
flex-direction: column;
}
.article{
width:90%;
}
& div:nth-child(3) {
text-align: justify;
}
& span {
color: rgb(67, 66, 66);
&:nth-child(1)::before {
font-style: italic;
content: "Written by ";
}
&:nth-child(2) {
font-style: italic;
&::before {
content: " ~ ";
}
}
}
.meta-data {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px;
}
}
上述代碼塊採用先進的 CSS 技術來對網頁內容進行全面的視覺定制。所使用的選擇器（由“.container”表示）充當構建所有其他設計元素的基礎。通過使用與號 (&) 可以輕鬆訪問和操作此特定選擇。在網絡瀏覽器中執行時，人們應該觀察到一種美觀的佈局，該佈局由根據預定義規範精心排列的各種組件組成。
你還需要 CSS 預處理器嗎?
雖然原生 CSS 中嵌套樣式的出現可能表明 CSS 預處理器的實用性下降，但必須記住，這些預處理器提供的不僅僅是簡單的嵌套功能。它們的規定包含循環、混合和函數等結構，使它們成為超越單純風格安排的不可或缺的資源。使用 CSS 預處理器還是避開 CSS 預處理器的選擇取決於每個單獨場景的特定需求和偏好以及開發人員的偏好。