作者:
gkm422
鏈接：
http://remind.javaeye.com/blog/225293
發表時間: 2008年08月07日
聲明：本文系JavaEye網站發布的原創博客文章，未經作者書面許可，嚴禁任何網站轉載本文，否則必將追究法律責任！
學習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對前面的例子進行擴充，使用首行和首字母偽元素對段落使用樣式。段落的第一行全部以大寫字母顯示。首行由瀏覽器和它的寬度控制。因此，你可能希望插入自己的分行符或對文本進行相應格式化來控制首行顯示。另外，段落的首字母為大字斜體字，并且帶下墜大寫字母顯示效果。
本文的討論也很精彩，瀏覽討論>>
JavaEye推薦
文章來源:
http://remind.javaeye.com/blog/225293