當開始接觸一些比較大一點點的專案，就開始需要用到不同的CSS Selectors來幫助我們正確的選到，我們所需要的元件，而且也能整理我們的程式碼，把有相同規則的內容統整再一起，方便我們後續的維護
內容目錄
CSS Selectors
是用於查找或選擇要設置的HTML樣式，將我們所編輯的CSS內容套用到這些HTML上，選擇器由於有很多的方式，大類分為五種，後續依照這五種再依序做說明
- 基本選擇器(Simple selectors)
- 組合選擇器(Combinator selectors)
- 偽類選擇器(Pseudo-class selectors)
- 偽元素選擇器(Pseudo-elements selectors)
- 屬性選擇器(Attribute selectors)
基本選擇器(Simple selectors)
這是最常用也是最基本的選擇方式，依照選擇方式還可以再細分為
- 通用選擇器(universal selector)
- 標籤選擇器(Type selector)
- 類別選擇器(Class selector)
- ID選擇器(ID selector)
通用選擇器(universal selector)
用於直接設定所有元素，使用”*”將代表全部的的元素
範例:所有顏色為白色
*{
color:#FFF;
}
標籤選擇器(Type selector)
用於直接選取HTML標籤，那整個程式中相同的標籤都將被設定
範例:所有H2標籤設定為字體大小為25px
h2{
font-size: 25px;
}
類別選擇器(Class selector)
針對特定的class標籤設定相同的CSS，不受標籤限制，只要有相同calss都將被設定
範例:設定開頭、中間、跟底部的區塊，都是950px，左右兩邊都留25px的距離，當作基本設定的排版，給他們class命名為container，並且CSS編輯時針對該class前面加” . “，就是” . container “
HTML
<head class=”container”></head>
<div class=”container”></div>
<footer class=”container”></footer>
CSS
.container {
width: 950px;
margin: 0 25px;
}
ID選擇器(ID selector)
ID一般用於Java Script的設定，特性：是一個文件中，ID唯一的。意思是指ID在整個程式碼中，只會出現在一個地方，那如果想針對這個ID的部分編輯CSS，可使用ID選擇器
範例:想設定id=”nav-list”的元件，多外框編輯，就在CSS選擇時加個#，就是” #nav-list”
HTML
<nav id=”nav-list”></nav>
CSS
#nav-list {
border: 1px solid black;
}
組合選擇器(Combinator selectors)
有時候寫一寫會發現，某些東西的規則差不多，而且我們都需要將他們寫同樣的內容，但如果將他們每一個都命名，且針對每一個都去設定就很難在之後進行整理跟維護，所以就可以透過組合選擇器他們找出來一起調整
這當中還可以細分為
- 後代選擇器（Descendant combinator）
- 子代選擇器（Child combinator）
- 一般兄弟選擇器（General sibling combinator）
- 相鄰兄弟選擇器（Adjacent sibling combinator）
後代選擇器（Descendant combinator）
html都是巢狀，所以是一層包一層的結果，如果我們想要選擇下層的標籤內容，可以使用後代選擇方式
語法是：在上層跟下層中間加上一個”空白”
範例:想要將h2改變顏色，在上層跟下層中間加上一個”空白”，在範例中使用了後代選擇器以及基本選擇器中的類別選擇器作範例
HTML
<header class=”top”>
<div class=”h2-container”>
<h2 class=”h2-font”>我是h2</h2>
</div>
</header>
CSS (請一個一個輪流貼上)
(一)
.top h2 {
color: blue;
}
(二)
.h2-container h2 {
color: red;
}
(三)
.h2-font {
color: burlywood;
}
透過這樣的觀察，我們發現即便是底下兩層也能選擇的到，這些結果都能看的到h2都會被改變顏色，可以依照實際寫程式時做選擇
子代選擇器（Child combinator）
跟後代差不多概念，但不同的是，只有下一層會被選取
語法是：兩個上下層中間增加”>”
範例:用跟剛剛相同的範例，要選取子代要用的是”>”，用上上層跟上層來定位h2，並改變它的顏色
HTML
<header class=”top”>
<div class=”h2-container”>
<h2 class=”h2-font”>我是h2</h2>
</div>
</header>
CSS(請一個一個輪流貼上)
(失敗)
.top>h2 {
color: blue;
}
(成功)
.h2-container > h2 {
color: red;
}
透過這樣的觀察，我們發現只有父子關係的才會被選到，隔一代是不可以選擇的
一般兄弟選擇器（General sibling combinator）
只要相同的層級，並且順位在自己後面，就可以使用一般兄弟選擇器，這裡指的不是父層或是子層，而是跟自己並排的
語法是：兩個中間增加”~”
HTML
<p>123</p>
<div>456</div>
<h2>789</h2>
<p>11111111111</p>
CSS
div~p {
color: red;
}
從這裡可以看到，只有最後的p變成紅色，因為第一個p是在div之前，所以那個不能算，只有在後面的p才可以變色，而且不用緊跟再一起
相鄰兄弟選擇器（Adjacent sibling combinator）
只要相同的層級，並且緊跟在後，就可以使用相鄰兄弟選擇器，這裡指的不是父層或是子層，而是跟自己並排的
語法是：兩個中間增加”+”
HTML
<p>123</p>
<div>456</div>
<p>新增一個緊貼的弟弟</p>
<h2>789</h2>
<p>11111111111</p>
CSS
div+p {
color: red;
}
從這可以發現，只有緊跟在div後面的p，才有做出反應，其他的部分都沒改變
偽類選擇器(Pseudo-class selectors)
這類的選擇方式，是比較特殊的動作，有些是使用者動作，有些是從本身結構，行為去選擇，例如當滑鼠在元素上頭時、找到所有兄弟的第一個…等
語法是：標籤後增加”：”
在細分為：
- 語言偽類Linguistic pseudo-classes
- 位置偽類Location pseudo-classes
- 使用者操作偽類User action pseudo-classes
- 時間維度偽類Time-dimensional pseudo-classes
- 資源狀態偽類Resource state pseudo-classes
- 輸入偽類The input pseudo-classes
- 樹結構偽類Tree-structural pseudo-classes
偽元素選擇器(Pseudo-elements selectors)
有點像是偽類選擇器，但偽元素可以操作更細微的部分，比如說操控項目中的第一行，項目中的第一個字母…等。或是使用標記或是選擇其前後的元素
語法是：標籤後增加”：：”
- 第一行偽元素The ::first-line Pseudo-element
- 第一個字偽元素The ::first-letter Pseudo-element
- 偽元素之前的 The ::before Pseudo-element
- 偽元素之後的The ::after Pseudo-element
- 標記的偽元素The ::marker Pseudo-element
- 選擇的偽元素The ::selection Pseudo-element
屬性選擇器(Attribute selectors)
這個用法，是針對某些特定屬性的值去做選擇，並延伸出各種用法
語法是：將要選擇屬性的部分加上”[]”
- CSS [attribute] Selector
- CSS [attribute=”value”] Selector
- CSS [attribute~=”value”] Selector
- CSS [attribute|=”value”] Selector
- CSS [attribute^=”value”] Selector
- CSS [attribute$=”value”] Selector
- CSS [attribute*=”value”] Selector