CSS3 選取器(選擇器, Selector)
選取器(Selectors)
Selector ——顧名思義就是選擇我們想套用樣式的標的物。
通常選取器的選擇，我們都是使用 HTML 已命名的標籤名稱來作為我們的選取器，例如 div 或 p 等等的標籤名。一旦完整設定之後，整個樣式的效果就會表現在我們所選擇的 HTML 標籤或其內容，然後在瀏覽器上呈現。
例如：我們在 HTML 文件中如果想讓 <div> 標籤在瀏覽器上呈現出有框線的話，這時我們就要找一個「目標」來套用相關的樣式；這時，我們就可以選擇 <div> 標籤中的 div 這三個字來作為我們的目標，像這樣經過我們選擇之後的目標文字就是——選取器(Selector)。
div {border: 1px solid red;} /* 選擇 div 標籤作為選取器 */
p {color: blue;} /* 選擇 p 標籤作為選取器 */
不過這樣的表現方式常會有問題產生，例如上述之中所表示的是：所有的 div 標籤均有 1px 寬度的紅色框線，所有的 p 標籤，其文字顏色(前景顏色)為藍色；除非您真的打算這麼做。
想要套用樣式，最好的方式就是為標籤加上識別選取器(id)或類型選取器(class)；如此一來的話，想要套用樣式的地方依舊可以套用，而不想套用的地方依舊可以保有原有的格式。若是其它的標籤不會用到的話，也可以直接在標籤之中插入 style 屬性來設置樣式。
div#myDemo {border: 1px solid red;} /* 加入 #myDemo 識別選取器 */
p.myDemo {color: blue;} /* 加入 .myDemo 類型選取器 */
<p style="color: red;">...</p> /* 插入 style 屬性到標籤中 */
語法的基本規則結構
在每個規則結構之中都包含有兩個部份，第一個部分是選取器，這是用來決定那些已命名的 HTML 元素標籤名稱或者由我們自定的名稱會受到樣式與其值的影響。
第二個部分則是樣式宣告，由一組或多組屬性(性質)樣式：樣式值來指定選取器的動作，也就是 { 與 } 所括起來的部份。倘若選擇器之中，有一個以上的屬性樣式，記得在每組之間用分號「;」隔開彼此。像這樣每組之間使用分號來「串接」的方式也就是其串接式樣式表名稱的由來。※如果只有一組樣式的話，其實是不用分號的，不過為了好習慣還是建議寫上。
類型選取器(Type selector)
類型選取器，我們從另個角度來說，也可以把它稱之為標籤選取器。在 HTML 文件中，有許多的元素標籤，而這些已命名的標籤名稱可供我們來使用。
簡單講，類型選取器就是選取文件中的標籤類型。
h1 {color: red;} /* 選取 h1 類型的標籤 */
div {border: 1px solid blue;} /* 選取 div 類型的標籤 */
p {letter-spacing: 2px;} /* 選取 p 類型的標籤 */
全域選取器(Universal selector)
全域，指的就是一份 HTML 文件中，任何的元素標籤類型(Element Type)。使用 * 號來表示全域選取器。
*.myDemo {color: red;} /* 任何含有 class="myDemo" 的標籤 */
*#myDemo {color: red;} /* 任何含有 id="myDemo" 的標籤 */
在上述的例子中，"*.myDemo 同等於 .myDemo" 並且 "*#myDemo 同等於 #myDemo"。雖是如此，但為了不造成選取器間的混亂與增進樣式表的可讀性，推薦您不要忽略 * 號。
div :first-child /* 意義不同於 div:first-child */ div:first-child /* 意義不同於 div :first-child */ div *:first-child /* 可讀性提高-等同 div :first-child */
如果不懂上方例子中的說明，那我們再來兩個例子做比較應該會清楚些。
div {color: red;}
div:first-child {color: blue;} /* 第一個 div */
<div>
<p>第一列</p> <!-- 藍色文字(文字顏色繼承) -->
<p>第二列</p> <!-- 藍色文字(文字顏色繼承) -->
<div>
<p>第三列</p> <!-- 紅色文字 -->
<p>第四列</p> <!-- 紅色文字 -->
</div>
</div>
div {color: red;}
div :first-child {color: blue;} /* div 標籤下所有的第一個子代(任何標籤) */
<div>
<p>第一列</p> <!-- 藍色文字 -->
<p>第二列</p> <!-- 紅色文字 -->
<div>
<p>第三列</p> <!-- 藍色文字 -->
<p>第四列</p> <!-- 紅色文字 -->
</div>
</div>
因此，一個不小心筆誤的話，就會造成不同的效果；所以加上個 * 號的話，是會更清楚些。
群組選取器(Groups of selectors)
當有很多選取器的樣式是相同時，就可以使用這個方式來簡化。※記得在選取器與選取器之間，使用逗號 "," 來區隔。
/* 例如原本的樣式如下 */ div#demoA {border: 1px solid black;} div#demoB {border: 1px solid black;} div#demoC {border: 1px solid black;} /* 這時就可簡化成如下 */ div#demoA, div#demoB, div#demoC {border: 1px solid black;}
在上述的例子中，因為每個單一的選取器是合法且有效的，所以整個群組選取器自然而然就是有效的語法結構；如果其一有非法且無效的選取器，那麼整個群組就會無效。
識別選取器(id)與類型選取器(class)
id 與 class 是我們在 HTML 標籤中，用來呼叫使用我們自定名稱所設定的樣式。例如：
<div id="myDemo">您的內容</div> /* 在 div 標籤中加入 id 屬性名稱 */ <div class="myDemo">您的內容</div> /* 在 div 標籤中加入 class 屬性名稱 */
在上述例子裡，我們在 <div> 中置了一個 id="myDemo"，其所代表的意義為——在該標籤中呼叫了一個我們自定識別選取器名稱為 myDemo 的選取器，所以在這個 <div>…</div> 標籤對中的內容就會依照這個選取器所設定的樣式屬性與屬性值來呈現。
識別選取器(id)
#id名稱 {樣式屬性: 樣式值;}
#myDemo {border: 1px solid blue;} /* 不限定何種標籤 */
只要在標籤中加上 id="您自定的名稱"，也就是識別選取器名稱，這樣便可呼叫使用。若是前頭不加 HTML 的標籤名，則表示它可以套用在任何的標籤上(不限定)。※不要忘記名稱前頭的 # 字號。
標籤名稱#id名稱 {樣式屬性: 樣式值;}
div#myDemo {border: 1px solid blue;} /* 限定於 div 標籤 */
有些樣式並非每種標籤都適用或者您只想限定在某標籤上來使用樣式，這時上述的格式就是用來限定標籤可以使用的識別選取器。例如：div#myDemo，則是表示 #myDemo 這個識別選取器只能用在 div 標籤中。
※注意：若未加上限定的標籤則表示所有的標籤皆可使用，不過這有賴於當中的樣式屬性是否適用於該標籤。
類型選取器(class)
.class名稱 {樣式屬性: 樣式值;}
.myDemo {border: 1px solid blue;} /* 不限定何種標籤 */
只要在標籤中加上 class="您自訂的名稱"，也就是類型選取器名稱，這樣便可呼叫使用。若是前頭不加標記語言的標籤名，則表示它可以套用在任何的標籤上(不限定)。※不要忘記名稱前頭的 . 句點。
標籤名稱.class名稱 {樣式屬性: 樣式值;}
div.myDemo {border: 1px solid blue;} /* 限定於 div 標籤 */
有些樣式並非每種標籤都適用或者您只想限定在某標籤上來使用樣式，這時上述的格式就是用來限定標籤可以使用的識別選取器。例如：div.myDemo，則是表示 .myDemo 這個類型選取器只能用在 div 標籤中。
※注意：若未加上限定的標籤則表示所有的標籤皆可使用，不過這有賴於當中的樣式屬性是否適用於該標籤。
class 與 id 的不同處
同樣一個 class 適合於好幾個不同標籤來使用，不過 id 卻只能適用於單一標籤，在可擴展超文件標記語言標準中更是嚴格。其實使用這兩個定義也不用去想那麼多，在「標準網頁」中只要記住一個大原則就可以了，那就是在「同一份」網頁中，其相同 id 的名稱只能出現一次，只要記住這點的話，那就差不多不會出錯了。
屬性選取器(Attribute selector)
元素標籤的屬性(attribute)也可以用來作為選取器。當您想使用屬性選取器時，必須考慮到目標元素標籤(Element)是否有相匹配的屬性來作為您想要的屬性選取器。
存在的屬性與其值的選取器
Element[att]
選取具有 att 屬性的元素標籤，並且無論其屬性值為何。
<h1 class="Demo">標題</h1> <!-- h1 標籤有一個 class 屬性其值為 Demo --> h1[class] {color: red;} /* 將具有 class 屬性的 h1 標籤設定成紅色字體 */ h1[class][title] /* 設定同時有 class 與 title 屬性的 h1 標籤 */
Element[att=val]
選取具有 att 屬性並且其值為 val 的元素標籤。
<h1 class="Demo" title="Post-Title">標題</h1> /* 當 h1 標籤的 class 屬性值為 Demo 時所設定的條件才成立 */ h1[class="Demo"] {color: red;} /* 當 h1 標籤的 class 屬性值為 Demo 並且 title 屬性值為 Post-Title 時所設定的條件才成立 */ h1[class="Demo"][title="Post-Title"] {color: red;}
Element[att~=val]
選取具有 att 屬性並且 val 為其值(使用空格分開的複數值)之一的元素標籤。
<h1 class="Demo1 Demo2">標題</h1>
/* 當 h1 標籤的 class 屬性值其一為 Demo2 時所設定的條件才成立 */
h1[class~="Demo2"] {color: red;}
Element[att|=val]
選取具有 att 屬性並且其值是以 val 或 val 之後接有連字號 – 作為開始的元素標籤。
h1[class|="Demo"] {color: red;} /* 例如我們做這樣的設定 */
<h1 class="Demo">標題</h1> /* 有作用 */
<h1 class="Demo-1">標題</h1> /* 有作用 */
<h1 class="Demo-2">標題</h1> /* 有作用 */
<h1 class="DemoABCD">標題</h1> /* 無作用 */
<h1 class="Red-FT">標題</h1> /* 無作用 */
子字串匹配的屬性選取器
[att^=val]
選取具有 att 屬性並且其值是以 val 作為開頭字首(前綴，Prefix)的元素標籤。如果 val 為空字串的話，該選取器將不代表任何東西。
p[title^="demo"] {color: red;} /* 例如我們做這樣的設定 */
<p title="demo">測試</p> /* 有作用 */
<p title="demoabcde">測試</p> /* 有作用 */
<p title="abcdedemo">測試</p> /* 無作用 */
<p title="">測試</p> /* 無作用 */
[att$=val]
選取具有 att 屬性並且其值是以 val 作為結尾字首(後綴，suffix)的元素標籤。如果 val 為空字串的話，該選取器將不代表任何東西。
p[title$="demo"] {color: red;} /* 例如我們做這樣的設定 */
<p title="demo">測試</p> /* 有作用 */
<p title="demoabcde">測試</p> /* 無作用 */
<p title="abcdedemo">測試</p> /* 有作用 */
<p title="">測試</p> /* 無作用 */
[att*=val]
選取具有 att 屬性並且其值包含有子字串 val 的元素標籤。如果 val 為空字串的話，該選取器將不代表任何東西。
p[title*="a"] {color: red;} /* 例如我們做這樣的設定 */
<p title="apple">測試</p> /* 有作用 */
<p title="paper">測試</p> /* 有作用 */
<p title="thank">測試</p> /* 有作用 */
<p title="think">測試</p> /* 無作用 */
<p title="">測試</p> /* 無作用 */
後代選取器(Descendant selector)
Selector1 Selector2 Selector3 ...
用來選擇「後代」關係的選取器。
div p b {color: red;} /* 例如我們做這樣的設定 */
/* 只有當 b 選取器的父元素為 p 並且其親代元素為 div 時，b 選取器才有作用 */
<div>
<p>測試</p> <!-- 繼承親代顏色 -->
<p><b>測試</b></p> <!-- 我們設定的紅色 -->
</div>
子代選取器(Child selector)
Selector > Selector
用來選擇「子代」關係的選取器。
例如在下方的例子中，第一層的 div#Demo 為父元素，所以只有它第一代的 p 元素會受影響變為紅色。也就是說選取任何為 div#Demo 的子元素( p 標籤)。
div#Demo > p {color: red;} /* 設定 div#Demo 之子元素的前景顏色 */
p {color: blue;}
<div id="Demo">
<p>第一代</p> <!-- 紅色 -->
<p>第一代</p> <!-- 紅色 -->
<div>
<p>第二代</p></div> <!-- 藍色 -->
<div>
<p>第二代</p></div> <!-- 藍色 -->
<p>第一代</p> <!-- 紅色 -->
</div>
兄弟選取器(Sibling selector)
Selector + Selector
用來選擇「兄弟」關係的選取器。
h1 + p {color: red;} /* 例如我們做這樣的設定 */
/* 當緊接在 h1 之後並且與 h1 同屬於一個親代(div)的 p 元素 */
<div>
<h1>測試</h1> <!-- 繼承親代顏色 -->
<p>測試</p> <!-- 我們設定的紅色 -->
<p>測試</p> <!-- 繼承親代顏色 -->
</div>
一般兄弟元素組合(General sibling combinator)
Selector ~ Selector
這是用來選取指定的「兄弟元素」，選取器與選取器之間使用~(tilde) 波浪符號連接。
h1 ~ p {border: 1px solid blue;} /* 指定 h1 的兄弟 p */
<h1>第一段</h1> <!-- 無作用 -->
<div>第二段</div> <!-- 無作用 -->
<p>第三段</p> <!-- 指定的 p 兄弟 -->
<h3>第四段</h3> <!-- 無作用 -->
<p>第五段</p> <!-- 指定的 p 兄弟 -->
