CSS選擇符使用

學習jquery的過程中,發現對于CSS的使用不熟悉,是以在這裡載一篇介紹CSS選擇符的文章,備忘.

相鄰同級選擇符

相鄰同級選擇符讓你選擇緊接在一個元素後面的同級元素。它允許你選擇緊靠在一個特定元素後的元素，并對它使用樣式。這些選擇符的文法是用加号(+)連接配接同級元素。

例如，你可能希望對某些标題元素後的段落使用與其它段落不同的樣式。清單A中的例子選擇緊貼在h1後面的元素，即說明這個問題。這個例子還指出，選中h1元素後的第二個段落時，同級元素可以指定給第二個段落，其字型顔色設定為綠色。

雖然應用元素和它們的子或同級元素擁有許多選項，但你可能希望通過屬性值對元素使用樣式。

屬性選擇符

屬性選擇符使用一個元素的屬性。也就是說，屬性或指定的屬性值是應用某個CSS樣式的決定性因素。屬性選擇符共有四種用法：

• [attribute]：隻要屬性存在，不管是否存在屬性值，都進行比對。
• [attribute = value]：如果屬性存在指定值，則傳回一個比對。
• [attribute ~= value]：如果屬性存在，則傳回一個比對；它包含一個由逗号隔開的屬性值清單，其中含有指定的屬性值。
• [attribute |= value]：如果屬性是由連字元分隔的屬性值清單中的第一個值，則進行比對。這個文法主要用于比對由lang屬性（XHMTL中的xml:lang）指定的文法子碼。

清單B中的例子說明了屬性選擇符的用法。如果且隻有它包含一個概括屬性時，它才對表進行格式化；它将abbr屬性值為sales的欄的字型顔色設為白色；将标題屬性值為col1的表欄的背景設為黃色。（警告：這個例子在Internet Explorer中無法正常運作，但在最新版的Firefox中能夠正常顯示。這個網站提供CSS選擇符支援的浏覽器清單。）

另外，你可以組合使用多個屬性選擇符，以便在一個CSS規則中應用幾個條件。清單C對前面的例子進行了一些修改，說明了這個問題。注意，隻有abbr屬性設為sales；scope屬性設為col，欄标題的格式才為白色。

到現在為止，選擇符主要用于處理文檔樹中的已有項目，但你也可以用它來處理頁面标準特性以外的元素。

僞類

CSS支援僞元素和僞類。在CSS中，僞表示你可以對一個文檔層次中不存在的，沒有CSS選擇符的元素使用樣式。根據狀态（visited, active等）對一個超連結使用樣式就是一個典型的例子。下面的清單簡單說明了CSS支援的僞類：

• active：對一個活動元素使用樣式。
• focus：對一個受到關注的元素使用樣式。
• hover：當使用者滑鼠劃過一個元素時，對它使用樣式。
• link：對一個未被通路的連結使用樣式。
• visited：對一個已被通路的連結使用樣式。
• first-child：對元素的第一個子元素使用樣式。
• lang：允許作者給特定的元素指定一種語言。

CSS1支援與連結有關的僞類(active, hover, link, visited)，CSS2增加了其它僞類。僞類的文法是使用一個逗号将僞類與元素分隔開來。清單D用僞類對錨元素，以及段落元素的第一個子元素使用樣式。

你可以通過一個優秀的線上指南确定一個特殊的浏覽器是否支援某個特性。CSS還支援用僞元素來處理資訊。

僞元素

僞元素允許你對文檔樹中不存在的資訊使用樣式。大量例子說明如何對一個元素内容的首行或首字母使用樣式。下面列出了CSS目前支援的僞元素：

• first-line：允許你對一個段落的首行内容應用特殊樣式。
• first-letter：允許你對一個元素内容的首字母應用樣式。你可以選擇常用的印刷效果，如首字母大寫和下墜大寫字母。
• before：允許你在一個元素的内容之前插入生成的内容。
• after：允許你在一個元素的内容之後插入生成的内容。

清單E對前面的例子進行擴充，使用首行和首字母僞元素對段落使用樣式。段落的第一行全部以大寫字母顯示。首行由浏覽器和它的寬度控制。是以，你可能希望插入自己的分行符或對文本進行相應格式化來控制首行顯示。另外，段落的首字母為大字斜體字，并且帶下墜大寫字母顯示效果。