CSS: 關係選擇器

前言

Combinator Selectors，中文稱作關係選擇器，可以用來選擇不同的html標籤，之前也有寫過一篇後代選擇器就是關係選擇器的其中一種，但因為內容會重複所以我決定把之前那篇刪掉，只留下這篇。

介紹

關係選擇器一共有四種，分別為後代選擇器(Descendant Selector)、子代關係選擇器(Child Selector)、鄰接兄弟選擇器(Adjacent Sibling Selector)、通用兄弟選擇器(General Sibling Selector)，讓我們來一一介紹。

後代選擇器(Descendant Selector)

以空格隔開

• 語法

  div p{
      ...
  }

• 例子

  顧名思義，就是可以選擇標籤的後代(被包在某標籤內的都是該標籤後代)來制定css規則，像我範例中想對div中的h2修改字型，我就使用了後代選擇器，可以看見被修改到的只有div中的h2，因為只有div中的h2才是div的後代。

子代關係選擇器(Child Selector)

以 > 隔開

• 語法

  div > p{
      ...
  }

• 例子

  和後代選擇器很相似，不同的是，這裡只會選擇子代。什麼是子代? 剛剛前面提到後代是包在該標籤內的所有標籤，子代則是只有第一層(只縮一次排)，從上面的範例可以看到我只選擇到了Sub Title的h2，div外的以及li內的都沒有選到，因為只有Sub Title是div的子代，li的稱為孫代(想成爸爸孩子孫子的感覺)

鄰接兄弟選擇器(Adjacent Sibling Selector)

以 + 隔開

• 語法

  h2 + h2{
      ...
  }

• 例子

  剛剛前面解釋了後代，那這邊使用了兄弟應該也很明顯，指的是同一層(縮排相同)的元素，從範例中可以看到選擇了h2的兄弟p，li中的p並沒有被選取，因為他並不是任何一個h2的兄弟。值得注意的是，這邊只會往下選取不會往上，所以第一個p也沒有被選取。
  那你可能想問，那個鄰接是什麼意思？很簡單，意思是只會找鄰居，所以你也可以發現同樣是兄弟的第四個p並沒有被選取到，因為他不是任何h2的鄰居。

通用兄弟選擇器(General Sibling Selector)

以 ~ 隔開

• 語法:

  h2 ~ h2{
      ...
  }

• 例子

  和鄰接兄弟選擇器很相似，同樣是選擇兄弟，最大的不同是不論是否為鄰居都會選擇到，所以剛剛沒被選擇到的第四個p以及h3底下的p這次都被選擇到了。

總結

我自己最常用到的還是後代選擇器，其他的我比較少用，會找機會來練習看看。