Beauty CSS(3)-選擇器part1

選擇器學不好,要飯要到老(誤)我認為學好CSS選擇器對於網站效率有很大幫助,當然這點我也還在學習當中。
以下是紀錄CSS的選擇器,文章若有謬誤還請不吝指正m(_ _)m。

ID selectors-ID選擇器
在CSS檔中寫成#NAME,一個檔案中只會有一個,跟身分證字號是一樣的意思。

Class selectors-Class選擇器
在CSS檔中寫成.NAME,一個Class可以同時套用到多個不同的元素上,就像是“小男孩”、“小女孩”可以有很多個!用來設定樣式很方便,只是名字一多容易混亂,所以Class命名尤其重要…取一堆abc123的,最後哭的一定是自己呀….。

ID只能有一個,Class可以有很多個,那ID跟Class能不能用同一個名字呢?答案是可以的,不過樣式如果有互相衝突,當然會以ID為主,畢竟老大只有一個,他比較大要讓他(喂)
雖然看過有網路文章認為命名使用ID會讓速度比較快,但因為ID同時也是Javascript用來控制的名稱,所以能不用就不用,不然要給程式套的話可是會很頭大的。

Type selectors-屬性選擇器
例如a, h1, div…等等,可直接使用Html元素作選擇器。
如果個別元素要一次作全頁設定,用這個就對了:

Universal selector-通用選擇器
只要輕輕的按下一個*字鍵,這個網頁的設定就全聽你的了….頗暴力的做法吶。

Descendant combinator-後代選擇器
如果想要讓某區塊“底下”的選擇器全部套用同一個設定的話,就使用後代選擇器,
寫法是A(空一格)B。

所以.test裡面的a元素通通都會套用到設定,中間又加了甚麼並不會造成影響:

Child combinator-子選擇器
像是父傳子般的繼承樣式,子元素也要在父元素下方才有作用。寫法是A>B。

以上面的CSS來看,底下這行能不能動呢?

那麼這行呢XD?

以上是今天的CSS選擇器,晚安!
本文同步發表於http://ithelp.ithome.com.tw/question/10137655

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *