語法
偽類的語法:
selector : pseudo-class {property: value}
CSS 類也可與偽類搭配使用。
selector.class : pseudo-class {property: value}
錨偽類
在支持CSS 的瀏覽器中,鏈接的不同狀態都可以不同的方式顯示,這些狀態包括:活動狀態,已被訪問狀態,未被訪問狀態,和鼠標懸停狀態。
<code>a:link</code> {color: #FF0000} /*未訪問的鏈接*/ <code>a:visited</code> {color: #00FF00} /*已 訪問的鏈接*/ <code>a:hover</code> {color: #FF00FF} /*鼠標移動到鏈接上*/ <code>a:active</code> {color: #0000FF} /*選定的鏈接*/
提示:在CSS定義中,a:hover必須被置於a:link和a:visited之後,才是有效的。
提示:在CSS定義中,a:active必須被置於a:hover之後,才是有效的。
提示:偽類名稱對大小寫不敏感。
偽類與CSS 類
偽類可以與CSS 類配合使用:
a <code>.red</code> : visited {color: #FF0000} <a class=" <code>red</code> " href="css_syntax.asp">CSS Syntax</a>
假如上面的例子中的鏈接被訪問過,那麼它將顯示為紅色。
CSS2 - :first-child 偽類
您可以使用:first-child 偽類來選擇元素的第一個子元素。這個特定偽類很容易遭到誤解,所以有必要舉例來說明。考慮以下標記:
<div> <code><p>These are the necessary steps:</p></code> <ul> <code><li>Intert Key</li></code> <li>Turn key <code><strong>clockwise</strong></code> </li> <li>Push accelerator</li> </ul> <p>Do <code><em>not</em></code> push the brake at the same time as the accelerator.</p> </div>
在上面的例子中,作為第一個元素的元素包括第一個p、第一個li 和strong 和em 元素。
給定以下規則:
p:first-child {font-weight: bold;} li:first-child {text-transform:uppercase;}
第一個規則將作為某元素第一個子元素的所有p 元素設置為粗體。第二個規則將作為某個元素(在HTML 中,這肯定是ol 或ul 元素)第一個子元素的所有li 元素變成大寫。
提示:最常見的錯誤是認為p:first-child之類的選擇器會選擇p元素的第一個子元素。
註釋:必須聲明<!DOCTYPE>,這樣:first-child才能在IE中生效。
為了使您更透徹地理解:first-child 偽類,我們另外提供了3 個例子:
例子1 - 匹配第一個<p> 元素
在下面的例子中,選擇器匹配作為任何元素的第一個子元素的p 元素:
<html> <head> <style type="text/css"> <code>p:first-child</code> { color: red; } </style> </head> <body> <code><p>some text</p></code> <p>some text</p> </body> </html>
例子2 - 匹配所有<p> 元素中的第一個<i> 元素
在下面的例子中,選擇器匹配所有<p> 元素中的第一個<i> 元素:
<html> <head> <style type="text/css"> <code>p > i:first-child</code> { font-weight:bold; } </style> </head> <body> <p>some <code><i>text</i></code> . some <i>text</i>.</p> <p>some <code><i>text</i></code> . some <i>text</i>.</p> </body> </html>
例子3 - 匹配所有作為第一個子元素的<p> 元素中的所有<i> 元素
在下面的例子中,選擇器匹配所有作為元素的第一個子元素的<p> 元素中的所有<i> 元素:
<html> <head> <style type="text/css"> <code>p:first-child i</code> { color:blue; } </style> </head> <body> <p>some <code><i>text</i></code> . some <code><i>text</i></code> .</p> <p>some <i>text</i>. some <i>text</i>.</p> </body> </html>
CSS2 - :lang 偽類
:lang 偽類使你有能力為不同的語言定義特殊的規則。在下面的例子中,:lang 類為屬性值為no 的q 元素定義引號的類型:
<html> <head> <style type="text/css"> <code>q:lang(no) { quotes: "~" "~" }</code> </style> </head> <body> <p>文字<q <code>lang="no"</code> >段落中的引用的文字</q>文字</p> </body></html>
偽類
W3C:"W3C"列指示出該屬性在哪個CSS版本中定義(CSS1還是CSS2)。
屬性 | 描述 | CSS |
---|---|---|
:active | 向被激活的元素添加樣式。 | 1 |
:focus | 向擁有鍵盤輸入焦點的元素添加樣式。 | 2 |
:hover | 當鼠標懸浮在元素上方時,向元素添加樣式。 | 1 |
:link | 向未被訪問的鏈接添加樣式。 | 1 |
:visited | 向已被訪問的鏈接添加樣式。 | 1 |
:first-child | 向元素的第一個子元素添加樣式。 | 2 |
:lang | 向帶有指定lang 屬性的元素添加樣式。 | 2 |
留言列表