在 CSS 中,「>」符號不像其他程式語言那樣用於比較兩個值。在這裡,我們使用大於號 (>) 作為選擇器。
在 CSS 中,選擇器用於選擇單一或多個 HTML 元素。每當我們在選擇器中使用大於號時,它會選擇父元素的直接子元素,但不會選擇深層嵌套的子元素。
使用者可以按照以下語法在 CSS 選擇器中使用大於號。
selecter1>selector2 { /* CSS code */ }
在上述語法中,「selector1」是父元素,「selector2」是直接子元素。因此,我們在聲明區塊中定義子元素的樣式。
在下面的範例中,我們建立了 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>
在下面的範例中,我們有一個 div 元素,其中包含不同層級的「p」元素。在 div 元素中,我們新增了「ht4」元素和「p」元素。因此,我們在第二層和第三層深度添加了“p”元素。
在 CSS 中,我們使用「div>p」CSS 選擇器來選擇 div 元素的所有直接「p」元素。此外,我們還使用了「div p」CSS 選擇器,它選擇 div 元素的所有「p」元素。
在輸出中,使用者可以觀察到「color: red」僅套用於第一個「p」元素,因為它是 div 元素的唯一直接子元素。當「div p」CSS 選擇器從所有層級選擇子元素時,「background-color: aqua」將套用於所有「p」元素。
<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>
在下面的範例中,我們使用大於號從深度嵌套的層級中選擇 HTML 元素。這裡,「container」HTML 元素包含無序列表,並且我們也在「container」元素之外建立了無序列表。
在CSS 中,我們使用'.container>ul>li' CSS 選擇器來選擇作為'ul' 元素的直接子元素的所有'li' 元素,這裡'ul' 元素應該是'ul' 元素的直接子元素具有“容器”類別名稱的元素。
在輸出中,我們可以看到所有 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 選擇器。
以上是CSS 中的大於號 (>) 選擇器是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!