[attribute="value"]

屬性選擇器：屬性值完全相等
html

  <div foo>I love HTML</div>
  <div foo="bar">I love CSS</div>

selector

[foo="bar"] {
  color: blue;
}

說明
此範例只會改變帶有屬性foo且值等於bar的元素，因此I love HTML
即便符合屬性foo但依然不會改變顏色

[attribute~=value]

屬性選擇器：屬性值包含
html

<div foo>I love HTML</div>
<div foo="barbar">I love CSS</div>
<div foo="bar bla">I love JavaScript</div>

selector

[foo~="bar"] {
  color: blue;
}

說明
此範例只會改變屬性foo且帶有bar值的元素
I love HTML 帶有屬性foo但沒有屬性值bla因此不生效
I love CSS 值為barbar而不是bar所以不會被改變樣式
I love JavaScript 值有bar與bla因此符合規則

[attribute^=value]

屬性值開頭配對
html

<a href="https://google.com">https link</a>
<a href="http://google.com">http link</a>

css

[href^="https"] {
	color: green;
}

說明
配對屬性href值為https開頭的元素，將其改為綠色
範例中第一個連結為https, 因此文字顏色會變為綠色
但二個連結為http開頭, 因此文字顏色不變

[attribute$=value]

屬性值結尾配對
html

<img src="http://domain/folder/demo.jpg" alt="jpg">
<img src="http://domain/folder/demo.png" alt="png">

css

[src$=".png"] {
    border: 5px solid green;
}

說明
配對屬性src值為.png開頭的元素，將其改為綠色
範例中第一個src值為.jpg結尾, 因此文字顏色會變為綠色
但二個src值為.png結尾, 因此文字顏色不變

範例中src值為隨意輸入因此並不存在, 實際執行測試回得到帶有alt值的文字。
但依然能夠看到src結尾為**.png**元素外誆變為綠色。

selector:visited

以訪問的連結
html

<a href="#">link</a>

css

a:visited {
	color: green;
}

說明
現在網站內被訪問過的連結將會呈現為綠色

selector:active

正在被執行時的樣式, 例如被點擊時
html

<button>Button</button>

css

button:active {
	transition: all .2s;
	transform: scale(.9);
}

說明
現在當網站的button被點擊時的當下button會縮小。

selector:hover

當滑鼠移動至該元素上方時套用
html

<a href="#">link</a>

css

a:hover {
	background: yellow;
}

說明
現在當滑鼠移動到網站的元素a上方時，該a的背景顏色將會改變。

selector:focus

焦點元素的樣式
html

<input type="text" name="name">

css

input:focus {
	background: yellow;
}

說明
現在當我們要輸入文字到該input時，背景色會變為黃色

selector:checked

符合選擇器且帶有checked屬性的元素
html

<div>
    女生 <input type="radio" name="gender">
</div>
<div>
    男生 <input type="radio" name="gender">
</div>

css

input:checked {
  margin-left: 1rem;
}

說明
當元素被選取時, 改變樣式。
範例中的input被選取時將會有往右移動1rem的效果

selector:enabled

符合選擇器的元素且沒有disabled屬性的元素
html

<p>I love CSS</p>
<input type="text" value="I love HTML">
<input type="text" disabled value="I love JavaScript">   

css

*:enabled {
    color: green;
}

說明
範例中的p元素雖然沒有disabled但p元素本身就沒有disabled屬性的差異性
因此p元素文字顏色不變。
接著兩個input元素就如預期的帶有disabled屬性的input顏色不變
而沒有disabled屬性的input文字則變成綠色。

將元素屬性disabled="false"是不會使偽類別:enabled生效。

selector:disabled

符合選擇器的元素且沒有disabled屬性的元素
html

<p disabled>I love CSS</p>
<input type="text" value="I love HTML">
<input type="text" disabled value="I love JavaScript">   

css

*:disabled {
    color: green;
}

說明
範例中的p元素雖然有disabled但p元素本身就沒有disabled屬性的差異性
因此p元素文字顏色不變。
接著兩個input元素就如預期的帶有disabled屬性的input顏色改變
而沒有disabled屬性的input文字顏色不變

將元素屬性disabled="false"是不會使偽類別:enabled生效。

selector:first-letter

選取符合選擇器元素中的第一個字元
html

<p>Every body love CSS</p>

css

p:first-letter {
    color: green;
}

說明
範例中的p元素的第一個字元E將會變為綠色

selector:first-line

選取符合選擇器元素中的第一行文字
html

<p>
  Every body love CSS
  <br>
  and Javascript
</p>

css

p:first-line {
    color: green;
}

說明
範例中的p元素的第一行文字顏色將會變為綠色
但並不是遇到br元素才變色，如果容器寬度較小導致提早換行
一樣會變動第一行的文字顏色，而不是遇到br才變色。

selector:not

選取符合選擇器元素但排除:not中所設定的selector
html

<p>Every body love CSS</p>
<p>I love HTML</p>
<p>I love Javascript</p>

css

p:not(:nth-child(2)) {
    color: green;
}

說明
範例中的CSS選擇器首先選取所有p元素
接著套用偽類別:not(:nth-child(2))表示不選第二個p元素
因此範例中的p元素只有第一個與第二個顏色變成綠色。

selector:first-child

選取符合選擇器元素中的第一個元素
html

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

css

p:first-child {
	background: yellow;
}

說明
改變p元素在父元素中第一個子元素且元素必須是p的p元素的背景色為黃色

selector:last-child

選取符合選擇器元素中的最後一個元素
html

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

css

p:last-child {
	background: yellow;
}

說明
改變p元素在父元素中最後一個子元素且元素必須是p的p元素的背景色為黃色

selector:first-of-type

選取符合選擇器元素中的第一個元素
html

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

css

p:first-of-type {
	background: yellow;
}

說明
改變p元素在父元素中第一個子元素p的背景色為黃色

selector:last-of-type

html

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

css

p:last-child {
	background: yellow;
}

說明
改變p元素在父元素中最後一個子元素p的背景色為黃色

額外補充
first-child與first-of-type, last-child與last-of-type在定義上非常相近
但差異其實很大，若讀者有興趣可以複製我的範例並且在div元素中改變第一個元素為其他元素
這時可以發現若是使用first-child不會有任何p元素的背景色發生改變
但若是使用first-of-type，就可以發現到第一個p元素依然被景色發生改變
而這就是其中的差異。

實務上在目前網站功能需求中其實早就大大的依賴這些CSS3 selector
當然還有更多我在此尚未提及的相關偽類別、偽元素
礙於時間我無法一一列舉出所有的資訊，更完整的內容大家可以參考w3school