資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 遞迴選擇所有子元素？
為了使用 CSS 遞迴選擇所有子元素，我們使用了萬用字元 (*) 與父 選擇器。
在本文中，我們有八個 段落 元素，其中六個包裝在 div 容器內，我們的任務是使用 CSS 遞迴選擇所有子元素。
使用 CSS 遞迴選擇所有子元素的步驟
我們將遵循以下步驟使用 CSS 遞迴選擇所有子元素
- 我們使用了八個段落元素，其中六個段落元素包裝在 div 容器內。除了**第 4 個段落**包裝在 span 標籤內之外，所有六個段落元素都是 div 容器的直接子元素。
- 我們設定了 背景顏色 以顯示選定的元素，並設定了背景的 最大寬度。
- **示例 1** 顯示瞭如何選擇**div 容器的所有直接子元素**。直接後代使用**.container > *** 選擇。
- **示例 2** 顯示瞭如何使用 CSS **遞迴選擇所有子元素**。為了遞迴選擇所有子元素，我們使用了**.container ***。
- 第 7 和 8 個段落在任何示例中都沒有被選中，因為它們不是父 div 元素的子元素。
示例 1
此示例僅選擇父 div 的直接後代，正如我們所看到的，**第 4 個段落**沒有被選中，因為它位於**span**標籤內。
<!DOCTYPE html>
<html>
<head>
<style>
.container> * {
background-color: #c0a2f0;
max-width: fit-content;
}
</style>
</head>
<body>
<h3>
Selecting All Child Elements Recursively
using CSS
</h3>
<p>
In this example we have selected only the
<strong>direct child elements</strong> of
parent div element.
</p>
<div class="container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<span>
<p>Paragraph 4</p>
</span>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</div>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
</body>
</html>
示例 2
此示例使用 CSS 遞迴選擇所有子元素。正如我們所看到的，第 4 個段落不是父 div 的直接後代，但它仍然被選中了。
<!DOCTYPE html>
<html>
<head>
<style>
.container * {
background-color: #c0a2f0;
max-width: fit-content;
}
</style>
</head>
<body>
<h3>
Selecting All Child Elements Recursively
using CSS
</h3>
<p>
In this example we have used <strong>universal
selector(*)</strong> to select all child elements
recursively using CSS.
</p>
<div class="container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<span>
<p>Paragraph 4</p>
</span>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
</div>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
</body>
</html>
結論
在本文中，我們瞭解瞭如何使用 CSS 遞迴選擇所有子元素。我們討論了兩個示例，以區分選擇父 div 的直接子元素（示例 1）和遞迴選擇父 div 的所有子元素（示例 2）。
更新於： 2024年9月26日
12K+ 瀏覽量
廣告