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(群組選取器)
多個單一選取器用”,”(逗號)隔開,套用至列出的所有物件