Css樣式技巧：經常使用的選擇器和通用選擇器

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

◇ 經常使用選擇器：

最經常使用的選擇器類型是類型選擇器和後代選擇器，類型選擇器用來尋找特定類型的元素，好比段落或標題元素，只需指定但願應用樣式的元素的名稱，類型選擇器有時候也稱爲元素選擇器或簡單選擇器。

後代選擇器可用來尋找特定元素或元素組的後代。後代選擇器由其餘兩個選擇器之間的空格表示。在這個示例中，只縮進是塊引用的後代的段落元素，其餘全部段落不受影響。

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

    前面提到過，許多CSS開發人員過分依賴類選擇器和皿選擇器。若是他們但願以一種方式對主內容區域中的標題應用樣式，而在第二個內容區域中採用另外一種方式，那麼他們極可能建立兩個類並幾在每一個標題上應用一個類，一種簡單得多的方法是結合使用類型、後代、D和類這幾種選擇器：

這是一個很是簡單明朗的示例。可是，讓你吃驚的是，只使用前面討論的4種選擇器就能夠成功地找到了許多元素。若是你發現本身在文檔添加了許多沒必要要的類，那麼這多是文檔結構不合理的一個警告信號。這時應該分析這些元素之間的差別。你經常會發現惟一的差別是它們在頁面.上出現的位置。不要給這些元素指定不1司的類，而應將一個類或ID應用於它們的祖先，而後使用後代選擇器定位它們。

僞類：

有時候，咱們須要根據文檔結構以外的其餘條件對元素應用樣式，例如表單元素或連接的狀態。這要使用僞類選擇器來完成。

:link和:visited稱爲連接僞類，只能應用於錨元素。:hover  :active和:focus稱爲動態僞類，理論上能夠應用於任何元素。大多數瀏覽器都支持這個功能口可是，IE6只注意應用於錨連接的:active和:hover選擇器，徹底忽略:focus。IE7在任何元素上都支持:hover，可是忽略:active和:focus。

最後，值得指出的是:經過把僞類鏈接在一塊兒，能夠建立更復雜的行爲，好比在已訪問連接和未訪問連接上實現不一樣的鼠標懸停效果。

◇ 通用選擇器

通用選擇器多是全部選擇器中最強大卻最少使用的。通用選擇器的做用就像是通配符，匹配全部可用元素。與其餘語言中的通配符同樣，通用選擇器由一個星號表示。通用選擇器通常用來對頁面上的全部元素應用樣式。例如，可使用如下規則刪除每一個元素上默認的瀏覽器內邊距和外邊距:

 

在與其餘選擇器結合使用時，通用選擇器能夠用來對某個元素的全部後代應用樣式，或者跳過一級後代。在本文之後將看到這麼作的實際效果。

本文來自 >> 尚學堂； 轉載請註明：http://www.sxt.cn/u/13421/blog/9068