作者: gkm422  鏈接：http://remind.javaeye.com/blog/225293  發(fā)表時(shí)間: 2008年08月07日

聲明：本文系JavaEye網(wǎng)站發(fā)布的原創(chuàng)博客文章，未經(jīng)作者書(shū)面許可，嚴(yán)禁任何網(wǎng)站轉(zhuǎn)載本文，否則必將追究法律責(zé)任！

學(xué)習(xí)jquery的過(guò)程中,發(fā)現(xiàn)對(duì)于CSS的使用不熟悉,所以在這里載一篇介紹CSS選擇符的文章,備忘.

相鄰?fù)?jí)選擇符

   

相鄰?fù)?jí)選擇符讓你選擇緊接在一個(gè)元素后面的同級(jí)元素。它允許你選擇緊靠在一個(gè)特定元素后的元素，并對(duì)它使用樣式。這些選擇符的語(yǔ)法是用加號(hào)(+)連接同級(jí)元素。

例如，你可能希望對(duì)某些標(biāo)題元素后的段落使用與其它段落不同的樣式。列表A中的例子選擇緊貼在h1后面的元素，即說(shuō)明這個(gè)問(wèn)題。這個(gè)例子還指出，選中h1元素后的第二個(gè)段落時(shí)，同級(jí)元素可以指定給第二個(gè)段落，其字體顏色設(shè)定為綠色。

雖然應(yīng)用元素和它們的子或同級(jí)元素?fù)碛性S多選項(xiàng)，但你可能希望通過(guò)屬性值對(duì)元素使用樣式。

 

屬性選擇符

屬性選擇符使用一個(gè)元素的屬性。也就是說(shuō)，屬性或指定的屬性值是應(yīng)用某個(gè)CSS樣式的決定性因素。屬性選擇符共有四種用法：

  • [attribute]：只要屬性存在，不管是否存在屬性值，都進(jìn)行匹配。
  • [attribute = value]：如果屬性存在指定值，則返回一個(gè)匹配。
  • [attribute ~= value]：如果屬性存在，則返回一個(gè)匹配；它包含一個(gè)由逗號(hào)隔開(kāi)的屬性值列表，其中含有指定的屬性值。
  • [attribute |= value]：如果屬性是由連字符分隔的屬性值列表中的第一個(gè)值，則進(jìn)行匹配。這個(gè)語(yǔ)法主要用于匹配由lang屬性（XHMTL中的xml:lang）指定的語(yǔ)法子碼。

列表B中的例子說(shuō)明了屬性選擇符的用法。如果且只有它包含一個(gè)概括屬性時(shí)，它才對(duì)表進(jìn)行格式化；它將abbr屬性值為sales的欄的字體顏色設(shè)為白色；將標(biāo)題屬性值為col1的表欄的背景設(shè)為黃色。（警告：這個(gè)例子在Internet Explorer中無(wú)法正常運(yùn)行，但在最新版的Firefox中能夠正常顯示。這個(gè)網(wǎng)站提供CSS選擇符支持的瀏覽器列表。）

另外，你可以組合使用多個(gè)屬性選擇符，以便在一個(gè)CSS規(guī)則中應(yīng)用幾個(gè)條件。列表C對(duì)前面的例子進(jìn)行了一些修改，說(shuō)明了這個(gè)問(wèn)題。注意，只有abbr屬性設(shè)為sales；scope屬性設(shè)為col，欄標(biāo)題的格式才為白色。

到現(xiàn)在為止，選擇符主要用于處理文檔樹(shù)中的已有項(xiàng)目，但你也可以用它來(lái)處理頁(yè)面標(biāo)準(zhǔn)特性以外的元素。

 

偽類

CSS支持偽元素和偽類。在CSS中，偽表示你可以對(duì)一個(gè)文檔層次中不存在的，沒(méi)有CSS選擇符的元素使用樣式。根據(jù)狀態(tài)（visited, active等）對(duì)一個(gè)超鏈接使用樣式就是一個(gè)典型的例子。下面的列表簡(jiǎn)單說(shuō)明了CSS支持的偽類：

  • active：對(duì)一個(gè)活動(dòng)元素使用樣式。
  • focus：對(duì)一個(gè)受到關(guān)注的元素使用樣式。
  • hover：當(dāng)用戶鼠標(biāo)劃過(guò)一個(gè)元素時(shí)，對(duì)它使用樣式。
  • link：對(duì)一個(gè)未被訪問(wèn)的鏈接使用樣式。
  • visited：對(duì)一個(gè)已被訪問(wèn)的鏈接使用樣式。
  • first-child：對(duì)元素的第一個(gè)子元素使用樣式。
  • lang：允許作者給特定的元素指定一種語(yǔ)言。

CSS1支持與鏈接有關(guān)的偽類(active, hover, link, visited)，CSS2增加了其它偽類。偽類的語(yǔ)法是使用一個(gè)逗號(hào)將偽類與元素分隔開(kāi)來(lái)。列表D用偽類對(duì)錨元素，以及段落元素的第一個(gè)子元素使用樣式。

你可以通過(guò)一個(gè)優(yōu)秀的在線指南確定一個(gè)特殊的瀏覽器是否支持某個(gè)特性。CSS還支持用偽元素來(lái)處理信息。

 

偽元素

偽元素允許你對(duì)文檔樹(shù)中不存在的信息使用樣式。大量例子說(shuō)明如何對(duì)一個(gè)元素內(nèi)容的首行或首字母使用樣式。下面列出了CSS當(dāng)前支持的偽元素：

  • first-line：允許你對(duì)一個(gè)段落的首行內(nèi)容應(yīng)用特殊樣式。
  • first-letter：允許你對(duì)一個(gè)元素內(nèi)容的首字母應(yīng)用樣式。你可以選擇常用的印刷效果，如首字母大寫和下墜大寫字母。
  • before：允許你在一個(gè)元素的內(nèi)容之前插入生成的內(nèi)容。
  • after：允許你在一個(gè)元素的內(nèi)容之后插入生成的內(nèi)容。

列表E對(duì)前面的例子進(jìn)行擴(kuò)充，使用首行和首字母?jìng)卧貙?duì)段落使用樣式。段落的第一行全部以大寫字母顯示。首行由瀏覽器和它的寬度控制。因此，你可能希望插入自己的分行符或?qū)ξ谋具M(jìn)行相應(yīng)格式化來(lái)控制首行顯示。另外，段落的首字母為大字斜體字，并且?guī)聣嫶髮懽帜革@示效果。

 

 


本文的討論也很精彩，瀏覽討論>>


JavaEye推薦




文章來(lái)源:http://remind.javaeye.com/blog/225293