作者jimmyken793 (達)
看板jimmyken793
標題[ HW ] CSS選取器 基本款
時間Sat Nov 29 08:58:22 2008
※ [本文轉錄自 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
1F：→ ming1053:要注意id只能有一個，class可重複(無名的工程師在這點推 11/29 12:52
2F：→ ming1053:腦包...)推 11/29 12:52
3F：→ jimmyken793:ID有重複印象中在getElementById會爆炸推 11/29 20:36
--
※ 發信站: 批踢踢實業坊(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)
4F：→ jimmyken793:勘誤 有打錯請通知我XD 11/29 20:59
5F：→ benck:吉米肯好威 推一個 11/29 21:00
※ 編輯: 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)
6F：推 jlg79531: 吉米肯好威 11/29 21:21
7F：推 LPH66:路人推沒有傲嬌XDDD 11/30 18:45