CSS Selector 的一些規則 Rules

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

可以對有符合屬性的元素產生作用

0 ) 個留言 (歡迎按此留下你的留言喔 ):

張貼留言