CSS 選擇器、選取器(CSS Selector)

css的選取器越來越複雜,這篇來介紹一下各種選取器

  1. Class selectors(類別選擇器)
  2. ID selectors(ID選取器)
  3. Tag selectors(標籤選取器)
  4. Universal selector(通用選取器)
  5. Attribute selectors(屬性選取器)
  6. Descendant combinator(後代選取器)
  7. Child combinator(子選取器)
  8. Adjacent sibling combinator(同層相鄰選取器)
  9. General sibling combinator(同層全部選取器)
  10. Pseudo-classes(偽類別選取器)
  11. Pseudo-elements(偽元素選取器)
  12. Groups of selectors(群組選取器)

1~5是單一選取器,6~12是組合選取器。

Class selectors(類別選取器)

“."開始的選取器名稱,html對應"class"屬性

<example>
<CSS>

<HTML>

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>
%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-03-%e4%b8%8b%e5%8d%889-37-29

Pseudo-elements(偽元素選取器)

:after   //在元素後加上內容(一般會配 content 屬性)
:before   //在元素前加上內容(一般會配 content 屬性)

<example>
<CSS>
.price:before { content:"NT$";}
.price:after { content:"元整";}
<HTML>
<p class="price">200</p>
<preview>
%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-10-03-%e4%b8%8b%e5%8d%889-32-08

Groups of selectors(群組選取器)

多個單一選取器用","(逗號)隔開,套用至列出的所有物件

Leave a Reply