CSS 選擇器

CSS 選擇器 - 術語表 | MDN

<!--Html-->
<div>
  <span>Span 1.</span>
  <span>Span 2.</span>
  <span>Span 3.</span>
</div>
<span>Span 4.</span>
<span>Span 5.</span>
<span>Span 6.</span>

鄰接同層選擇器 Next-sibling combinator

• Next-sibling combinator - CSS: Cascading Style Sheets | MDN
• 語法：selector1 + selector2
• 不包含自己本身，選取相鄰元素。

div + span {
  background-color: pink;
}

通用同層選擇器 Subsequent-sibling combinator

• Subsequent-sibling combinator - CSS: Cascading Style Sheets | MDN
• 語法：selector1 ~ selector2
• 不包含自己本身，選取同層指定的元素，會跳過未指定的元素。

div ~ span {
  background-color: pink;
}

直屬選擇器 Child combinator

• Child combinator - CSS: Cascading Style Sheets | MDN
• 語法：selector1 > selector2
• 比 後代選擇器 還嚴格一點，選擇第一個子元素。

不知道是不是我誤解它的意思，結果跟 後代選擇器 一樣...待研究。

div > span {
  background-color: pink;
}

後代選擇器 Descendant combinator

• 後裔選擇器 - CSS | MDN
• 語法：selector1 selector2 （代表一或多個空白字元）
• 不要求嚴格的父子關係，選擇所有指定的後代。

div span {
  background-color: pink;
}