CSS中如何使用偽類

發(fā)布時間：2021-07-09 16:16:34 來源：億速云閱讀：135 作者：Leah 欄目：web開發(fā)

CSS中如何使用偽類，針對這個問題，這篇文章詳細介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

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>

假如上面的例子中的鏈接被訪問過，那么它將顯示為紅色。

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實例的效果。

提示：最常見的錯誤是認為p:first-child之類的選擇器會選擇p元素的***個子元素。

注釋：必須聲明<!DOCTYPE>，這樣:first-child才能在IE中生效。

為了使您更透徹地理解:first-child偽類，我們另外提供了3個例子：

◆例子1-匹配***個元素

在下面的例子中，選擇器匹配作為任何元素的***個子元素的p元素：

<html> <head> <styletypestyletype="text/css"> p:first-child{  color:red;  }  </style> </head>  <body> <p>sometext</p> <p>sometext</p> </body> </html>TIY

◆例子2-匹配所有元素中的***個元素

在下面的例子中，選擇器匹配所有元素中的***個元素：

<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-匹配所有作為***個子元素的元素中的所有元素

在下面的例子中，選擇器匹配所有作為元素的***個子元素的元素中的所有元素：

<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

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）。

關(guān)于CSS中如何使用偽類問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識。

向AI問一下細節(jié)

CSS中如何使用偽類

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽