標籤

4GL (1) 人才發展 (10) 人物 (3) 太陽能 (4) 心理 (3) 心靈 (10) 文學 (31) 生活常識 (14) 光學 (1) 名句 (10) 即時通訊軟體 (2) 奇狐 (2) 爬蟲 (1) 音樂 (2) 產業 (5) 郭語錄 (3) 無聊 (3) 統計 (4) 新聞 (1) 經濟學 (1) 經營管理 (42) 解析度 (1) 遊戲 (5) 電學 (1) 網管 (10) 廣告 (1) 數學 (1) 機率 (1) 雜趣 (1) 證券 (4) 證券期貨 (1) ABAP (15) AD (1) agentflow (4) AJAX (1) Android (1) AnyChart (1) Apache (14) BASIS (4) BDL (1) C# (1) Church (1) CIE (1) CO (38) Converter (1) cron (1) CSS (23) DMS (1) DVD (1) Eclipse (1) English (1) excel (5) Exchange (4) Failover (1) Fedora (1) FI (57) File Transfer (1) Firefox (3) FM (2) fourjs (1) Genero (1) gladiatus (1) google (1) Google Maps API (2) grep (1) Grub (1) HR (2) html (23) HTS (8) IE (1) IE 8 (1) IIS (1) IMAP (3) Internet Explorer (1) java (4) JavaScript (22) jQuery (6) JSON (1) K3b (1) ldd (1) LED (3) Linux (117) Linux Mint (4) Load Balance (1) Microsoft (2) MIS (2) MM (51) MSSQL (1) MySQL (27) Network (1) NFS (1) Office (1) OpenSSL (1) Oracle (126) Outlook (3) PDF (6) Perl (60) PHP (33) PL/SQL (1) PL/SQL Developer (1) PM (3) Postfix (2) postfwd (1) PostgreSQL (1) PP (50) python (5) QM (1) Red Hat (4) Reporting Service (28) ruby (11) SAP (234) scp (1) SD (16) sed (1) Selenium (3) Selenium-WebDriver (5) shell (5) SQL (4) SQL server (8) sqlplus (1) SQuirreL SQL Client (1) SSH (2) SWOT (3) Symantec (2) T-SQL (7) Tera Term (2) tip (1) tiptop (24) Tomcat (6) Trouble Shooting (1) Tuning (5) Ubuntu (37) ufw (1) utf-8 (1) VIM (11) Virtual Machine (2) VirtualBox (1) vnc (3) Web Service (2) wget (1) Windows (19) Windows (1) WM (6) Xvfb (2) youtube (1) yum (2)

2014年6月5日 星期四

CSS 選擇器、選取器(Selector)種類簡介

http://blog.fishsaut.com/2010/03/css-selector.html

http://blog.mukispace.com/css-selectors/

  1. Class selectors(Class選擇器,Dreamweaver稱為類別選擇器,這樣翻譯也對啦)
  2. ID selectors(ID選擇器)
  3. Type selectors(型態選擇器,Dreamweaver稱為標籤選擇器,因為套用於HTML標籤)
  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(群組選擇器)

Class selectors(Class選擇器)


.」開頭,名稱可自訂,一張網頁可有多個class屬性值。

CSS

.emText { color:red;}

HTML

<p class="emText">此段會套用紅色</p>


ID selectors(ID選擇器)


#」開頭,名稱可自訂,一張網頁只能有一個ID屬性值

CSS

#emText { color:red;}

HTML

<p id="emText">此段會套用紅色</p>


Type selectors(型態選擇器)


設定於HTML的標籤上,網頁上所有的標籤都會套用。

CSS

h1 {color:red;}
p {color:black;}

HTML

<h1> 標題會套用紅色</h1>
<p> 段落會套用黑色</p>


Universal selector(通用選擇器)


使用字元「*」,整張網頁下的所有元素都會套用設定。

CSS

* {color:red;}

HTML

<h1> 標題會套用紅色</h1>
<p> 段落會套用紅色</p>


Attribute selectors(屬性選擇器)


針對有套用特定屬性的標籤做CSS設定。例如:

E[att]   //套用於含att屬性的E標籤(簡易屬性選擇器)
E[att=val]   //套用於att屬性值為val的E標籤(精確屬性選擇器)
E[att~=val]   //套用於att屬性值包含val的E標籤(部份屬性選擇器)


CSS

div {color:black;}
div[title] {color:red;}
div[title=fishbecat] {color:green;}
div[title~=fishbecat] {color:blue;}

HTML

<div> 此區塊會套用黑色</div>
<div title="blog"> 此區塊會套用紅色</div>
<div title="fishbecat"> 此區塊會套用綠色</div>
<div title="fishbecat's blog">此區塊會套用藍色</div>

顧名思義,就是可以針對標籤裡頭的屬性做更進一步的修改。屬性選擇器總共有4種類型,分別為:
  • h2[class] //符合所有含 class 的 h2 標籤即可
  •  
  • h2[class=title] //符合含 class=title 的 h2 標籤
  •  

  • h2[class~=title] //只要 class 裡頭有包含 title 文字的 h2 標籤即可
  •  

  • h2[class|=title] //class 的開始值必須為 title 的 h2 標籤
  •  





Descendant combinator(後代選擇器)


E F,利用空白鍵區隔兩個元素,表示在 E 元素內的 F 元素才會套用。(中間相隔有別的tag也可以)


CSS

a { color:black;}
h1 a { color:red;}
#wrapper a { color:green;}

HTML

<a> 只設定a標籤會套用黑色</a>

<h1>
<a>在h1裡的a標籤會套用紅色</a>
</h1>

<div id="wrapper">
<a>在ID=wrapper裡的a標籤會套用綠色</a>
</div>


Child combinator(子選擇器)


E > F,利用>區隔兩個元素,表示在有父子關係的元素才會套用。與後代不同的是 E 及 F 元素之間不能再插入其它的元素,否則就不是父子關係了。

CSS

#wrapper > p{ color:red;}
#wrapper p { color:black;}

HTML

<div id="wrapper">
<p>在id=wrapper區塊裡的段落會套用紅色</p>
</div>

<div id="wrapper">
<span>
<p>中間多了span就只會套用黑色</p>
</span>
</div>


Adjacent sibling combinator(同層相鄰選擇器)


E + F,利用+區隔兩個元素,表示在與 E 同一層關係的相鄰 F 元素才會套用。

CSS

h1 { color:red;}
h1 + p { color:green;}

HTML

<h1>標題1會套用紅色</h1>
<p>跟h1相鄰的p會套用綠色</p>
<p>沒有跟h1相鄰的p會套用預設值</p>


General sibling combinator(同層全體選擇器)


E ~ F,利用~區隔兩個元素,表示在與 E 同一層關係的 F 元素全部都會套用。
不過這是CSS 3的選擇器。目前並沒有所有瀏覽器都支援,Dreamweaver CS4也沒支援。

CSS

h1 { color:red;}
h1 ~ p { color:green;} 

HTML

<h1>標題1會套用紅色</h1>
<p>h1接下來p都會套用綠色</p>
<p>h1接下來p都會套用綠色</p>


Pseudo-classes(偽類選擇器)


這個名詞可能許多人都覺得陌生,但提到a:link、a:visited、a:hover、a:active應該就很熟悉了吧!

:link   //連結平常的樣式
:visited   //連結查閱後的樣式
:hover   //滑鼠滑入的樣式
:active   //滑鼠按下的樣式
:focus   //目標為焦點的樣式
:lang(E)   //當語言為E的樣式
:first-child   //第一個元素的樣式

CSS

p:first-child { color:red;}
p:lang(zh-TW) { color:green;}

HTML

<div>
<p>第一個 p 會套用紅色</p>
<p>其它的 p 不會變色</p>
</div>

<div>
<p lang="zh-TW">語言為 zh-TW 會套用綠色</p>
<p lang="en">語言為 en 不會變色</p>
</div>


Pseudo-elements(偽元素選擇器)


其實偽元素選擇器蠻多的,小魚就只先介紹 :first-line、:first-letter 這兩個元老級的偽元素。

:first-line   //元素的第一行會套用
:first-letter   //元素的第一個字母會套用
:after   //在元素後加上內容(一般會配 content 屬性)
:before   //在元素前加上內容(一般會配 content 屬性)

CSS

p:first-line { color:red;}
p:first-letter { color:green;}
.price:before { content:"NT$";}
.price:after { content:"元整";}

HTML

<div>
<p>
第一行會套用紅色<br/>
第二行以後不會變色
</p>
</div>

<div>
<p>
第一個字會套用綠色<br/>
其它的字不會變色
</p>
</div>

<div>
數字前加上"NT$",數字後加上"元整":<span class="price"> 1000 </span>
</div>


Groups of selectors(群組選擇器)


您還可以用「,」逗點區隔,同時對多個選擇器定義樣式。 
E, F, G,同時針對E、F、G元素設定樣式

CSS

h1, h2, p {color:red;}

HTML

<h1>群組內的元素都套用紅色</h1>
<h2>群組內的元素都套用紅色</h2>
<p>群組內的元素都套用紅色</p>
<a>群組沒定義的元素不會變色</a>




沒有留言:

張貼留言