CSS 中的大於號 (>) 選擇器是什麼？-css教學-PHP中文網

CSS 中的大於號 (>) 選擇器是什麼？

王林

發布： 2023-08-29 12:09:02

轉載

1083 人瀏覽過

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 元素的唯一直接子元素。當「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>

登入後複製

範例 3

在下面的範例中，我們使用大於號從深度嵌套的層級中選擇 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中文網其他相關文章！