[ HW ] CSS選取器 基本款

[jimmyken793 (達)]

※ [本文轉錄自 jimmyken793]

科科 借我打廣告



CSS語法裡面有個很重要也很強大的的東西    Selector

什麼是Selector呢

簡單來說就是一段用來描述你想要指定的目標的語法

例如

#kerker{
        color:blue;
}

會把id是kerker的這個元素變成藍色

藍色的那部分就是Selector了


W3C的規格(阿 叫做建議規格XD)在這裡

http://www.w3.org/TR/CSS2/selector.html

底下會簡單的介紹一下





以下如果有用大寫代表標籤內的Attribute值或者目標物件的屬性

一開始是單一個Selector的介紹


*       全部選取

就是把網頁上所有元素選取起來


TAG     把目標標前名稱為TAG的都選起來

例如我打div就是把所有<div>標籤都選起來


.C_NAME  將網頁裡面Class是C_NAME的東西選起來

class的指定方式是這樣的 <div class="abc"> abc123 </div>


#TARGET 把網頁裡面id是TARGET的選起來

ID的指定方法和CLASS很像 也就是<div id="ababc"> ababc123123 </div>

非常強大好用的功能


[ATTR]  把網頁裡面有任何一個Attribute的值是ATTR的都選起來

例如 <div abc="kk"></div> <p sd="kk"></p> 等都會被[kk]選到


[ATTR=VAL] 把網頁裡面所有元素裡面 有個叫做ATTR的Attribute而且裡面的值是VAL的都

選起來(好長= =)

例如 <div ss="kk"></div> <p ss="kk"></p> 就可以用 [ss=kk]來選



那麼就要講到把它們組合在一起用了


有很多種組合法

序列:

div h2

這樣是就是選取接在div後面的h2標籤(注意是選取那個h2 而不是div)

像是 <div></div><h2>Title</h2>


巢狀:

div>h2

這樣則是選取在div"裡面"的h2標籤

例如 <div><h2>Title</h2></div>


一次定義多個:

.button, .link,  .input

這樣選取的是屬於button、link或input"類別"的元素

以下皆適用

<div class="button"></div>
<a class="link"></a>
<div class="input"></div>

另外還有某些特殊屬性(沒有傲嬌)

active  點下去的那瞬間險式的樣式

hover   滑過去的時候顯示的樣式

focus   被選到的時候顯示的樣式

link    沒被點過的連結的樣式

visited 被點過的連結的樣式


屬性的用法就是

Selector:屬性

例如

.topMenuLinks:hover

之類的東西




Selector的簡單介紹大概到這



關於內部描述樣式的那部分 有人要接手嗎囧




--
※ 發信站: 批踢踢兔(ptt2.cc)
◆ From: 118.166.117.46
→ ming1053:要注意id只能有一個，class可重複(無名的工程師在這點
→ ming1053:腦包...)
→ jimmyken793:ID有重複印象中在getElementById會爆炸

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.166.117.46
※ 編輯: jimmyken793     來自: 118.166.117.46       (11/29 20:55)
※ 編輯: jimmyken793     來自: 118.166.117.46       (11/29 20:56)
※ 編輯: jimmyken793     來自: 118.166.117.46       (11/29 20:59)
※ 編輯: jimmyken793     來自: 118.166.117.46       (11/29 20:59)
→ jimmyken793:勘誤 有打錯請通知我XD
→ benck:吉米肯好威 推一個
※ 編輯: jimmyken793     來自: 118.166.117.46       (11/29 21:01)
※ 編輯: jimmyken793     來自: 118.166.117.46       (11/29 21:03)
※ 編輯: jimmyken793     來自: 118.166.117.46       (11/29 21:04)
推 jlg79531:     吉米肯好威
推 LPH66:路人推沒有傲嬌XDDD