css的選取器越來越複雜，這篇來介紹一下各種選取器
- Class selectors（類別選擇器）
- ID selectors（ID選取器）
- Tag selectors（標籤選取器）
- Universal selector（通用選取器）
- Attribute selectors（屬性選取器）
- Descendant combinator（後代選取器）
- Child combinator（子選取器）
- Adjacent sibling combinator（同層相鄰選取器）
- General sibling combinator（同層全部選取器）
- Pseudo-classes（偽類別選取器）
- Pseudo-elements（偽元素選取器）
- Groups of selectors（群組選取器）
1~5是單一選取器，6~12是組合選取器。
Class selectors（類別選取器）
“.”開始的選取器名稱，html對應”class”屬性
<example>
<CSS>
.text{ color:red; }
<HTML>
<p class="text">紅色字</p>
ID selectors（ID選取器）
“#”開始的選取器名稱，html對應”id”屬性
<example>
<CSS>
#text{ color:red; }
<HTML>
<p id=”text”>紅色字</p>
Tag selectors（標籤選取器）
HTML標籤的選取器名稱，html對應同名標籤
<example>
<CSS>
p{ color:red; }
<HTML>
<p>紅色字</p>
Universal selector（通用選取器）
“*”星號，所有物件都會被套用
Attribute selectors（屬性選取器）
HTML標籤和屬性組合的選取器名稱，html對應同名標籤和屬性
E[att=val]
標籤[屬性=屬性值]
<TIPS小提示>html標籤格式
<p align=”center”>置中對齊</p>
<開始標籤 屬性=”屬性值”>標籤內容</結束標籤>
更詳細的介紹可以看這一篇
<example>
<CSS>
input[type=text]{ color:red; }
<HTML>
<input type=”text” value=”紅色字”>
Descendant combinator（後代選取器）
利用單一選取器分別html物件層級的選取器，html對應相同層級物件
<example>
<CSS>
ul li{ color:red; }
<HTML>
<ul>
<li>紅色字</li>
<li>紅色字</li>
<li>紅色字
<ul>
<li>紅色字</li>
<li>紅色字</li>
<li>紅色字</li>
</ul>
</li>
</ul>
Child combinator（子選取器）
相對於後代選取器，僅第一層級後代被影響，html對應相同層級物件
<example>
<CSS>
ul > li{ color:red; }
<HTML>
<ul>
<li>紅色字</li>
<li>紅色字</li>
<li>紅色字
<ul>
<li>預設字</li>
<li>預設字</li>
<li>預設字</li>
</ul>
</li>
</ul>
General sibling combinator（同層選取器）
相對於同層選取器，僅第一個”+”符號之後(p)的物件被影響，html對應相同選取器物件
<example>
<CSS>
h1 ~ p { color:red; }
<HTML>
<h1>預設字</h1>
<p>紅色字</p>
<p>預設字</p>
Adjacent sibling combinator（同層相鄰選取器）
與”+”符號之前(h1)的選取器物件同層級的”+”符號之後(p)的物件，html對應相同選取器物件
<example>
<CSS>
h1 + p { color:red; }
<HTML>
<h1>預設字</h1>
<p>紅色字</p>
<p>紅色字</p>
Pseudo-classes（偽類別選取器）
在選取器之後直接加上偽類別，html對應的物件會依據加上的偽類別而有不同的變化
:link //連結一般狀態的樣式
:visited //連結查閱後的樣式
:hover //滑鼠滑過的樣式
:active //滑鼠按下的樣式
:focus //目標為焦點的樣式
:first-line //元素的第一行會套用
:first-letter //元素的第一個字母會套用
:first-child //第一個元素的樣式
:last-child //最後一個元素的樣式
:nth-child() //指定順序元素的樣式
:nth-child(數字) //指定(數字)順序元素的樣式
:nth-child(odd) //奇數元素的樣式
:nth-child(even) //偶數元素的樣式
<example>
<CSS>
a:link { color:black; }
a:visited { color:gray; }
a:hover { color:orange; }
a:active { color:red; }
<HTML>
<a>按鈕文字</a>
<effect>
a標籤一般狀態為”黑字”
a標籤查閱過為”灰字”
a標籤滑鼠滑過為”橘字”
a標籤按下為”紅字”
<CSS>
p:first-letter { color:gray; }
p:first-line { color:pink; }
li:nth-child(odd) { color:red; }
li:nth-child(even) { color:green; }
li:nth-child(3) { color:blue; }
li:first-child { color:orange; }
li:last-child { color:yellow; }
<TIPS小提示>影響範圍較大的選取器要先寫
<HTML & effect>
<p>
第(第一個字是”灰字”)一行字是”粉紅字”<br>
第二行以後是預設字
</p>
<ul>
<li>第1個LI是”橘字”</li>
<li>偶數LI是”紅字”</li>
<li>第3個LI是”藍字”</li>
<li>偶數LI是”紅字”</li>
<li>奇數LI是”綠字”</li>
<li>偶數LI是”紅字”</li>
<li>奇數LI是”綠字”</li>
<li>偶數LI是”紅字”</li>
<li>奇數LI是”綠字”</li>
<li>偶數LI是”紅字”</li>
<li>奇數LI是”綠字”</li>
<li>最後1個LI是”黃字”</li>
</ul>
<preview>
Pseudo-elements（偽元素選取器）
:after //在元素後加上內容（一般會配 content 屬性）
:before //在元素前加上內容（一般會配 content 屬性）
<example>
<CSS>
.price:before { content:”NT$”;}
.price:after { content:”元整”;}
<HTML>
<p class=”price”>200</p>
<preview>
Groups of selectors（群組選取器）
多個單一選取器用”,”(逗號)隔開，套用至列出的所有物件