CSS Selector 的一些規則 Rules
- Tag , ID , class
Tag 就是像 html , div , img 這樣的標籤,也就是element
ID 就是 <div id="name"> ,#name 也就是你給的名字,類似命名
class 算是樣式,一個網頁最好只能有一個id,但是class可以多個重複出現,而且一個tag可以套用多個class , 類似 <div id="name" class="calss1 class2" /> 這樣 ,只需要空白分隔
- "," - and選擇
#name1 ,#name2 { ...} 可以一次將規則套在兩個以上的選擇者上
- " " -children 選擇
dom內的child選擇,用空白 ,譬如 div.name img { ...} , div內的圖片會產生作用,重點是他是針對裡面只要有img 不管你在第幾層,都會跑作用 ,譬如..
<div id="name1">
<div> <div><div><a><img /></a></div></div></div>
</div>
這樣的話剛剛那個語法還是會實現....這個要特別注意!!!
- ">" , 同上
不過他是對於內部的children的第一層 會作用,其實大部分應該要使用這個
- "+" 緊鄰元素選擇
譬如
<h3>hello</h3> <img /><img/>
,使用
h3 + img + img { width:200px; }
只會對第二張 ,也就是最後一個element作用喔~~
心得紀錄而已...有時間再補個範例 +圖
補一下...
- [title] 屬性選擇
[title="Page history"] { background-color:red;}
可以對有符合屬性的元素產生作用