組合選擇器

開放

5.1 選擇器種類

CSS中的組合選擇器允許根據元素在DOM樹中的相互位置來選擇元素。它們提供了更精確的樣式控制,允許根據上下文來樣式化元素。在CSS中有幾種類型的組合選擇器:後代子元素相鄰兄弟元素一般兄弟元素

組合選擇器種類:

  • 後代選擇器 (Descendant Selector)
  • 子元素選擇器 (Child Selector)
  • 相鄰兄弟元素選擇器 (Adjacent Sibling Selector)
  • 一般兄弟選擇器 (General Sibling Selector)

5.2 後代選擇器

後代選擇器選擇所有是指定元素後代的元素。後代是指位於指定元素內的所有元素無論嵌套層次(這不僅僅是孩子,還包括孫子和曾孫等)。

語法:

父元素 後代 {
  屬性: 值;
  屬性: 值;
}

範例:

CSS
/* 選擇所有位於 <div> 內的 <p> */
div p {
  color: blue;
}
HTML
<div>
  <p>這個段落會是藍色的。</p>
  <div>
    <p>這個段落也會是藍色的,因為它是 "div" 的後代。</p>
  </div>
</div>
<p>這個段落不會是藍色的。</p>

5.3 子元素選擇器

子元素選擇器只選擇那些是指定父元素的直接子元素的元素。

語法:

父 > 子 {
  屬性: 值;
  屬性: 值;
}

範例:

CSS
/* 只選擇那些作為 .container 直接子元素的 <p> */
.container > p {
  color: green;
}
HTML
<div class="container">
  <p>這個段落會是綠色的。</p>
  <div class="wrapper">
    <p>這個段落不會是綠色的,因為它不是 .container 的直接子元素。</p>
  </div>
  <p>這個段落會是綠色的。</p>
</div>
<p>這個段落不會是綠色的。</p>

5.4 相鄰兄弟元素選擇器

相鄰兄弟元素選擇器選擇緊接著指定元素之後位於同一層級的元素。

語法:

前置 + 後置 {
  屬性: 值;
  屬性: 值;
}
CSS
/* 選擇直接跟在 <h1> 之後的 <p> */
h1 + p {
  color: red;
}
HTML
<h1>標題 1</h1>
<p>這個段落會是紅色的,因為它緊跟在 "h1" 之後。</p>
<p>這個段落不會是紅色的。</p>

5.5 一般兄弟選擇器

一般兄弟選擇器選擇所有跟在指定元素之後且位於同一層級的元素。

語法:

前置 ~ 後置 {
  屬性: 值;
  屬性: 值;
}

範例:

CSS
/* 選擇所有在 <h1> 之後且位於同一層級的 <p> */

h1 ~ p {
  color: purple;
}
HTML
<h1>標題 1</h1>
<p>這個段落會是紫色的。</p>
<p>這個段落也會是紫色的。</p>
<div>
  <p>這個段落不會是紫色的,因為它位於不同的層級。</p>
</div>
1
任務
Frontend SELF TW,  等級 12課堂 5
上鎖
子選擇器
子選擇器
1
任務
Frontend SELF TW,  等級 12課堂 5
上鎖
相鄰選擇器
相鄰選擇器
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言