CSS selector 選擇符是我們進行CSS網頁版面的基礎。 CSS selector到底有哪些,如何合理的運用呢?選擇符可以分為三類,除了第一類HTML selector之外,其它兩類我們是可以自己命名的,在進行命名時,注重包含語義,或者添加必要的註釋,使我們的代碼更清楚,易讀。
HTML selector 標籤選擇符
HTML selector就是HTML的標籤,如:DIV,TD,P,H1等等,如你用CSS 定義了它們,在CSS文章所控制的頁面中這個標籤的性質就按照你的定義來顯示。
例如我們想叫H1的顏色是紅的,則:H1 {color: red}。這裡我們學習一個CSS的特點,它可以定義好幾個selector在一個rule。如:H1, H2, TD {color: red}。這個定義就能讓所有的H1, H2, 和TD 的顏色都為紅色。在具體使用中,可以將幾個設定相同的屬於合併起來編寫,並減少我們的程式碼。
Class selector 類別選擇符
Class selector有兩種,一種叫相關class selector,它跟一個HTML 的標籤有關係它的語法是tag.Classname {property:value}。如:我們想設定一些而不是全部H1 的顏色是紅色的H1.redone {color: red}則:第一個H1 是紅色的,而第二個就不是了。
第二種是獨立class selector。它可被任何HTML標籤所應用。它的語法如下.Classname {property:value}假如我們有下面這個定義.blueone {color: blue}那麼我們可以把他應用到不同的標籤中去。非常明顯class selector 給了我們更多的自由與發揮的空間。
ID selector ID選擇符
ID selector 其實跟獨立class selector 的功能很像。而差異在於它們的文法和用法不同,以及對於javascript 操縱HTML元素有幫助。我們在佈局中,對不同的結構區域的定義,往往用ID選擇符。
它的語法如下#IDname {property:value}。假如我們有下面的定義#yelowone {color: yellow}。我們可以運用這個定義到任何的有相同ID 名字的標籤,如:text here你可能覺得既然ID selector 和獨立class selector 功能一樣,為什麼兩者都存在呢?有ID 的HTML元素可以被JavaScript來操縱。