深入學(xué)習(xí)CSS偽類使用
本文向大家描述一下CSS偽類的用法，CSS偽類用于向某些選擇器添加特殊的效果，這里主要包括錨偽類，CSS偽類和類的區(qū)別，以及:first-child偽類和:lang偽類的用法等內(nèi)容，相信本文介紹一定會讓你有所收獲。
CSS偽類的語法：
- selector:pseudo-class{property:value}
CSS類也可與偽類搭配使用。
- selector.class:pseudo-class{property:value}
錨偽類
在支持CSS的瀏覽器中，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標(biāo)懸停狀態(tài)。
- a:link{color:#FF0000} /*未訪問的鏈接*/
- a:visited{color:#00FF00} /*已訪問的鏈接*/
- a:hover{color:#FF00FF} /*鼠標(biāo)移動到鏈接上*/
- a:active{color:#0000FF} /*選定的鏈接*/
提示：在CSS定義中，a:hover必須被置于a:link和a:visited之后，才是有效的。
提示：在CSS定義中，a:active必須被置于a:hover之后，才是有效的。
提示：偽類名稱對大小寫不敏感。
CSS偽類與CSS類
偽類可以與CSS類配合使用：
- a.red:visited{color:#FF0000}
- <aclassaclass="red"href="css_syntax.asp">CSSSyntax</a>
假如上面的例子中的鏈接被訪問過，那么它將顯示為紅色。#p#
CSS2-:first-child偽類
您可以使用CSS偽類中:first-child偽類來選擇元素的***個子元素。這個特定偽類很容易遭到誤解，所以有必要舉例來說明。考慮以下標(biāo)記：
- <div>
- <p>Thesearethenecessarysteps:</p>
- <ul>
- <li>IntertKey</li>
- <li>Turnkey<strong>clockwise</strong></li>
- <li>Pushaccelerator</li>
- </ul>
- <p>Do<em>not</em>pushthebrakeatthesametimeastheaccelerator.</p>
- </div>
在上面的例子中，作為***個元素的元素包括***個p、***個li和strong和em元素。
給定以下規(guī)則：
- p:first-child{font-weight:bold;}
- li:first-child{text-transform:uppercase;}
***個規(guī)則將作為某元素***個子元素的所有p元素設(shè)置為粗體。第二個規(guī)則將作為某個元素（在HTML中，這肯定是ol或ul元素）***個子元素的所有l(wèi)i元素變成大寫。
請訪問該鏈接，來查看這個:first-child實例的效果。
提示：最常見的錯誤是認(rèn)為p:first-child之類的選擇器會選擇p元素的***個子元素。
注釋：必須聲明<!DOCTYPE>，這樣:first-child才能在IE中生效。
為了使您更透徹地理解:first-child偽類，我們另外提供了3個例子：
◆例子1-匹配***個<p>元素
在下面的例子中，選擇器匹配作為任何元素的***個子元素的p元素：
- <html>
- <head>
- <styletypestyletype="text/css">
- p:first-child{
- color:red;
- }
- </style>
- </head>
- <body>
- <p>sometext</p>
- <p>sometext</p>
- </body>
- </html>TIY
◆例子2-匹配所有<p>元素中的***個<i>元素
在下面的例子中，選擇器匹配所有<p>元素中的***個<i>元素：
- <html>
- <head>
- <styletypestyletype="text/css">
- p>i:first-child{
- font-weight:bold;
- }
- </style>
- </head>
- <body>
- <p>some<i>text</i>.some<i>text</i>.</p>
- <p>some<i>text</i>.some<i>text</i>.</p>
- </body>
- </html>TIY
◆例子3-匹配所有作為***個子元素的<p>元素中的所有<i>元素
在下面的例子中，選擇器匹配所有作為元素的***個子元素的<p>元素中的所有<i>元素：
- <html>
- <head>
- <styletypestyletype="text/css">
- p:first-childi{
- color:blue;
- }
- </style>
- </head>
- <body>
- <p>some<i>text</i>.some<i>text</i>.</p>
- <p>some<i>text</i>.some<i>text</i>.</p>
- </body>
- </html>TIY
#p#CSS2-:lang偽類
CSS偽類中:lang偽類使你有能力為不同的語言定義特殊的規(guī)則。在下面的例子中，:lang類為屬性值為no的q元素定義引號的類型：
- <html>
- <head>
- <styletypestyletype="text/css">
- q:lang(no)
- {
- quotes:"~""~"
- }
- </style>
- </head>
- <body>
- <p>文字<qlangqlang="no">段落中的引用的文字</q>文字</p>
- </body></html>
CSS偽類
瀏覽器支持：IEInternetExplorer,F:Firefox,N:Netscape。
W3C：“W3C”列的數(shù)字顯示出偽類屬性由哪個CSS標(biāo)準(zhǔn)定義（CSS1還是CSS2）。
【編輯推薦】
- CSS偽類的概念及作用
- IE中中CSS偽類:hover的使用及其BUG
- CSS樣式表設(shè)計十個雕蟲小技
- 深入學(xué)習(xí)六大CSS選擇符的使用
- 解讀DIV CSS網(wǎng)頁布局中CSS無效十個原因
