資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學CSS 中的“大於號 (>)”選擇器是什麼？
在 CSS 中，“>” 符號不用於像其他程式語言那樣比較兩個值。在這裡，我們使用大於號 (>) 作為選擇器。
在 CSS 中，選擇器用於選擇單個或多個 HTML 元素。當我們在選擇器中使用大於號時，它選擇父元素的直接子元素，而不是巢狀較深的子元素。
語法
使用者可以遵循以下語法在 CSS 選擇器中使用大於號。
selecter1>selector2 {
/* CSS code */
}
在上述語法中，“selector1”是父元素，“selector2”是直接子元素。因此，我們在宣告塊中為子元素定義樣式。
示例 1
在下面的示例中，我們建立了 HTML 元素的有序列表。在 CSS 中，我們使用了“ol>li”選擇器，它表示選擇所有作為“ol”HTML 元素直接子元素的“li”元素。
在輸出中，使用者可以觀察到列表的所有元素都變成了藍色，因為所有“li”元素都是“ol”元素的直接子元素。
<html>
<head>
<style>
ol>li {
color: blue;
}
</style>
</head>
<body>
<h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</h3>
<ol>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<li> NodeJS </li>
</ol>
</body>
</html>
示例 2
在下面的示例中，我們有一個 div 元素，其中包含不同級別的“p”元素。在 div 元素中，我們添加了“ht4”元素和“p”元素。因此，我們在第二和第三級別添加了“p”元素。
在 CSS 中，我們使用了“div>p”CSS 選擇器來選擇 div 元素的所有直接“p”元素。此外，我們還使用了“div p”CSS 選擇器，它選擇 div 元素的所有“p”元素。
在輸出中，使用者可以觀察到“color: red”僅應用於第一個“p”元素，因為它只是 div 元素的直接子元素。“background-color: aqua”應用於所有“p”元素，因為“div p”CSS 選擇器選擇所有級別的子元素。
<html>
<head>
<style>
div>p {
color: red;
}
div p {
background-color: aqua;
}
</style>
</head>
<body>
<h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</h3>
<div>
<p> This paragraph is at the first level. </p>
<h3>
<p> This paragraph is at the second level. </p>
<h4>
<p> This paragraph is at the third level. </p>
</h4>
</h3>
</div>
</body>
</html>
示例 3
在下面的示例中，我們使用了大於號來從深度巢狀的級別選擇 HTML 元素。“container”HTML 元素包含無序列表，我們還在“container”元素之外建立了無序列表。
在 CSS 中，我們使用了“.container>ul>li”CSS 選擇器來選擇所有作為“ul”元素的直接子元素的“li”元素，並且這裡的“ul”元素應該是具有“container”類名的元素的直接子元素。
在輸出中，我們可以看到所有 CSS 都只應用於巢狀列表。
<html>
<head>
<style>
.container>ul>li {
color: red;
padding: 3px;
background-color: green;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>Using the <i> (>) CSS selector </i> to select direct child elements in CSS</h3>
<div class = "container">
<ul>
<li> one </li>
<li> Two </li>
<li> Three </li>
</ul>
</div>
<ul>
<li> Four </li>
<li> Five </li>
<li> Six </li>
</ul>
</body>
</html>
使用者學習瞭如何在 CSS 中使用大於號 (>) CSS 選擇器。它用於選擇特定元素的直接子元素。在這裡，我們可以將 HTML 標籤、類名、ID 等與大於號 (>) CSS 選擇器一起使用。
2K+ 次瀏覽
