close

css-banner.jpg

語法

偽類的語法:

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
arrow
arrow
    創作者介紹
    創作者 設計密碼工作室 的頭像
    設計密碼工作室

    Design Code 設計密碼

    設計密碼工作室 發表在 痞客邦 留言(0) 人氣()