[讓CSS更規範]常用選擇器

摘自《精通CSS:高級Web標準解決方案》

有效且結構良好的文檔爲應用樣式提供了一個框架。要想使用CSS將樣式應用於特定的(X)HTML元素,需要有辦法找到這個元素。在CSS中,執行這一任務的樣式規則部分稱爲選擇器(selecter)。

最常用的選擇器類型是類型選擇器和後代選擇器。類型選擇器用來尋找特定類型的元素,比如段落、錨或標題元素,只需指定希望應用樣式的元素的名稱。類型選擇器有時候也稱爲元素選擇器或簡單選擇器。

p {color: black;}
a {text-decoration: underline;}
h1 {font-weight: bold;}

後代選擇器可用來尋找特定元素或元素組的後代。後代選擇器由其他兩個選擇器之間的空格表示。在下面的示例中,只在作爲列表項的後代的錨元素上應用樣式,而段落中的錨不受影響。

li a {text-decoration: none;}

這兩種選擇器適合於應用那些應用範圍廣的一般性樣式。要想尋找更特定的元素,可以使用ID選擇器和類選擇器。顧名思義,這兩種選擇器用於尋找那些具有指定ID或類名的元素。ID選擇器由一個#字符表示,類選擇器由一個點號表示。下面示例中的第一條規則使簡介段落中的文本以粗體顯示,第二條規則讓日期顯示爲綠色:

#intro {font-weight: bold;}
.datePosted {color: green;}

Some Text


24/3/2006

正如前面提到的,許多CSS開發人員過度依賴類選擇器和ID選擇器(雖然後者的程度較輕)。如果他們希望以一種方式對主內容區域中的標題應用樣式,而在第二個內容區域中採用另一種方式,那麼他們很可能創建兩個類並且在每個標題上應用一個類。一種簡單得多的方法是使用類型、後代、ID和(或)類幾種選擇器的組合:

#mainContent h1 {font-size: 1.8em;}
#secondaryContent h1 {font-size: 1.2em;}


Welcome to my site


...


Latest news


...

這是一個非常簡單的示例。但是,只使用前面討論的四種選擇器就可以成功地找到許多元素。如果你發現自己在文檔中添加了許多不必要的類,那麼這可能是文檔結構不合理的一個警告信號。這時應該分析這些元素之間的差異。你常常會發現唯一的差導師是它們在頁面上出現的位置。不要給這些元素指定不同的類,而是將一個類或ID應該用於它們的祖先,然後使用後代選擇器定位它們。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章