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;}

一般超連結     Hint 超連結

 選擇器 , 」一次定義多個元件共通屬性,底下例子是同時指定 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

回應
Google Search
Google
累積 | 今日
loading......
平均分數:0 顆星
投票人數:0
我要評分:
Google