201703141219CSS Selector 選擇器
有用 CSS 的朋友都知道要定義 class 的屬性是用 「. 」 id 用「#」,但偶爾參考別人的CSS檔案卻發現有「, 」、「> 」、「+ 」、「~ 」、「^ 」、「* 」、「$ 」... 等等的符號,這些稱為選擇器(Selector)每個符號有著不同的作用,今天就來看看可以怎麼使用。
選擇器 「. 」定義 class,範例使用 <DIV class="footer"><p>這是底部 © copyright 2017;</p></DIV>,後面CSS設定都省略 <style> 標籤的註記
<style>
.footer { background-color:#550B00; color:#FFF; height:50px;}
</style>
選擇器 「#」定義 id ,範例使用 <a href="#"> 一般超連結 </a><a id="x_hint" href="#"> Hint 超連結 </a>
#x_hint { color:red; text-decoration:none;}
#x_hint:hover { background-color:red; color:yellow;}
選擇器 「, 」一次定義多個元件共通屬性,底下例子是同時指定 body 與 html 都具有下方的設定值
html, body {
font-size:16px;
font-family:微軟正黑體,標楷體,san-serif;
}
選擇器 「 」空白,div p { } 選擇所有 p 在 div 區塊內的設定
div p { background-color: yellow; }
選擇器 「>」, div > p {} 選擇所有 p 的上層為 div 的設定
div > p { background-color: yellow; }
上面兩個看起來都是在設定當 p 在 div 區塊內時 設定其 CSS 樣式,但差別在
div p {} 會將 div 區塊下的所有 p 區塊都套用
div > p {} 只會將 div 區塊下的直接的 p 區塊套用,意即 p 區塊如果再被包在 strong 區塊內的話,就不會被套用
<div>
<h2>這是標題 h6 文字</h2>
<p>這是在 div 下的 p 區塊文字</p>
<strong> <p>「加粗體」這是在 div 下的 p 區塊文字 </p> </strong>
</div>
選擇器 「+」, div + p { } 選擇與 div 緊接著的 p 區塊(若中間有其他 tag 就不會套用,有空白或文字不受影響),範例:
<div>
<p>div 內 p 區塊</p>
</div>
12345678
<p>第一段落</p>
<p>第二段落</p>
div + p { background-color: yellow; }
選擇器 「~」, p ~ strong { } 設定在 p 區塊之後的 strong 區塊作用
<strong> 粗體字 </strong>
<p>段落文字</p>
<strong> p 區塊後的粗體字 </strong>
<p>段落文字 <strong>222</strong></p>
p ~ strong { background-color: yellow; }
----- 接下來是一些 屬性 attribute 的設定 ---------------------
選擇器 [attribute] 這個名稱為標籤 tag 的參數(屬性),也可以自己定義
例如 <a href="#"> hello ~ </a> 當中的 href 就是 a 標籤的 attribute 屬性值
選擇器 [attribute] 設定某個屬性的 CSS 效果,底下 critical 屬性是自行定義的
<a href="https://www.nctu.edu.tw">NCTU</a>、
<a href="https://www.nthu.edu.tw" critical >NTHU</a>、
<a href="https://www.ncu.edu.tw">NCU</a>
a[critical] { background-color: yellow; }
選擇器 [attribute=value] ,例如 當超連結是以開新視窗 target=_blank 方式開啟就套用粗體
a[target=_blank] { font-weight: bold; }
在這種 [attribute=value] 設定方式還有多種符號可以進一步套用選擇,
請注意:該符號要寫在等號左邊
「*」:[attribute*=value],例 a[href*=go] { font-weight: bold; } 只要連結 href 的值有 go 關鍵字就會套用此效果,go 、 good 、gogoro ... 都算符合這條件唷~
「^」:[attribute^=value],例 a[href^=https] { font-weight: bold; } 連結 href 的值為 https 字開頭,就會套用此效果
「$」:[attribute$=value],例 a[href$=docx] { font-weight: bold; } 連結 href 的值為 docx 字結尾,就會套用此效果
「~」:[attribute~=value],例 img[title~=news] title 說明有 news 文字就會套用此效果,new、newbra 等都不是,文字必須完全 match
「|」:[attribute|=value],效果同 ^ 取屬性的開頭做判斷
----- 接著是某個狀態效果的設定 ---------------------
請注意:有些是一個「:」,有些是「::」
:active,用在 a 標籤,當點下連結時的反應。 範例 a:active { background-color: yellow; }
:link,用在 a 標籤,該連結網站還沒瀏覽過的呈現樣式。 範例 a:link { color: blue; }
:visited,用在 a 標籤,該連結網站還已瀏覽過的呈現樣式。 範例 a:visited { color: gray; }
:hover,當滑鼠移到物件上時呈現的樣式 。 範例 a:hover { background-color: yellow; }
::before,在元件之前插入樣式
::after,在元件之後插入樣式,例如底下針對 h2 在的前後增加了 ※ 符號
.page h2:before{ content:"※"; }
.page h2:after{ content:"※"; }
:focus,設定頁面元件當 on focus 時設定樣式。在網頁操作我們可以使用 tab 切換目前作用(on focus)的元件,而這個就是設定作用時呈現的樣式。
input:focus {} 就只作用在 input 輸入框,若前面未指定套用對象,只寫 :focus 則可通用在 on focus 元件上
:target,可運用在網頁內 anchor 的跳躍點,當跳到 #name 點時改變該點的樣式,例如
p:target { background-color: yellow; }
<a href="#loc1">link</a>
<p id="loc1"> ..... </p>
:in-range、:out-of-range 可用來判斷輸入框輸入的範圍是否正確,在範圍內或超過給予樣式設定
input:out-of-range { background-color: red; }
<input type="number" min="1" max="100">
reference: https://www.w3schools.com/cssref/css_selectors.asp
~End