對於後端程式起家的我, 以前我對CSS的選擇器selector大概就只知道id、class、*，一直到前17年初我真正踏入前端的領域後才知道原來選擇器可以有這麼多的使用方式。

資料來源：w3cschol

.class

類別選擇器
html

// html
<div class="foo bar">
    Hello CSS
</div>

selector

.foo {
  color: red;
}

.foo.bar {
  color: blue;
}

補充說明
以上範例最終Hello CSS將會呈現藍色，特別注意.foo與.bar在css裡我刻意地將他們連在一起
這意義代表通時擁有.foo與.bar類的元素顏色才會被定義於藍色。
而如果我們將CSS範例改成以下

.foo {
  color: red;
}

.foo　.bar {
  color: blue;
}

其差異只在於.foo與.bar的定義用空白隔開，但實際意義去大大不同
當這兩個類使用空白分開時代表CSS將會定義其.bar類屬於.foo類的子元素時才改變顏色
所以由於以上html範例標籤div雖然帶有.bar類，但與.foo類屬於同一層級，並不符合父子關係
所以color: blue並不會對這個div生效。

這個定義對於當初不熟悉的我來說覺得有點繞，搞不太清楚為甚麼要這樣解釋。
原因在於這句話同時解釋了CSS的運作

CSS將會從選擇器的最右邊開始往左邊解讀

當CSS看到.foo .bar這樣的定義時，會先找出文件裡帶有.bar類的element元素，然後如果左邊沒有其他類的定義，就會套用定義，但！如果左邊還有其他選擇器就會在近一步的搜尋是否屬於.foo類，依此類推依序向文件頂點html做查找，由此可知若把選擇器寫的越詳細、越深，其實效能越是低下

.id

html

<div id="foo" class="bar">
  Hello CSS
<div>

selector

#foo {
  color: red;
}

.bar {
  color: blue;
}

補充說明
.id選擇器其特定度相當高僅次於!important與行內定義
以這個範例來說，雖然.bar類定義於id#bar之後，但由於類特定度低於id，因此.bar類的color雖然成功定義但不會被瀏覽器所使用。
更多特定度的解釋歡迎大家查看我在鐵人邦Day 2. CSS 特定度 Specificity這篇文章。

selector, selector

html

<div>
  Hello CSS
<div>
<p class="foo">I love CSS3</p>

selector

div, .foo {
  color: red;
}

補充說明
使用逗號可以將選擇器分隔，使定義對每個選擇器都生效

selector > selector

html

<div>
  I love HTML
  <p>I love CSS</p>
</div>
  
<p>I love JavaScript</p>

selector

p {
  color: blue;
}

div p {
  color: red;
}

補充說明
>符號代表定義該選擇器的第一層子元素且符合選擇器規則的對象樣式
以上範例 I love HTML 會是黑色， I love CSS會是紅色，而I love JavaScript會是藍色

selectot1 + selector2

定義樣式於緊接在selector1之後的selector2
html

<div>I love HTML</div>
<p>I love CSS</p>
<p>I love JavaScript</p>

selector

div + p {
  color: red;
}

補充說明
在這個範例中只有符合緊接在div元素之後的p元素會改變顏色，因此只有I love CSS變成了紅色。

[attribute]

屬性選擇器
html

  <div foo>I love HTML</div>
  <div foo="bar">I love HTML</div>
  <input type="text" value="I love CSS">
  <input type="number" value="10">

selector

[foo] {
  color: blue;
}

input[type="text"] {
  color: red;
}

補充說明
在這個範例中首先選擇器[foo]將帶有foo屬性的元素改變文字顏色為藍色
不管該屬性的值為何，甚至是沒有值，所以此範例的兩個I love HTM都會變為藍色！

接著將帶有type屬性且屬性值為text的元素文字改變成紅色
因此雖然第二個input帶有屬性type但值不符合text所以文字顏色不會被改變