深入學(xué)習(xí)CSS偽類語法
本文和大家重點(diǎn)討論一下CSS偽類的用法，CSS偽類用于向某些選擇器添加特殊的效果，另外還有錨偽類的介紹，在支持CSS的瀏覽器中，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動(dòng)狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標(biāo)懸停狀態(tài)。
CSS偽類
CSS偽類用于向某些選擇器添加特殊的效果。
CSS定位屬性
CSS偽類的語法：
selector:pseudo-class{property:value;}CSS類也可與偽類搭配使用：
selector.class:pseudo-class{property:value;}
錨偽類
在支持CSS的瀏覽器中，鏈接的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動(dòng)狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標(biāo)懸停狀態(tài)。
- a:link{color:#FF0000}/*unvisitedlink*/
- a:visited{color:#00FF00}/*visitedlink*/
- a:hover{color:#FF00FF}/*mouseoverlink*/
- a:active{color:#0000FF}/*selectedlink*/
提示：在CSS定義中，a:hover必須被置于a:link和a:visited之后，才是有效的。
提示：在CSS定義中，a:active必須被置于a:hover之后，才是有效的。
提示：偽類名稱對(duì)大小寫不敏感。
CSS偽類和CSS類
CSS偽類可以與CSS類配合使用：
- a.red:visited{color:#FF0000}
- <aclassaclass="red"href="css_syntax.asp">CSSSyntax</a>
假如上面的例子中的鏈接被訪問過，那么它將顯示為紅色。
CSS2-:first-child偽類
CSS偽類中:first-child偽類對(duì)另一個(gè)元素的第一個(gè)子元素進(jìn)行匹配。
例子1：
在這個(gè)例子中，選擇器對(duì)div元素中的第一個(gè)子元素為p的元素進(jìn)行匹配-對(duì)div元素內(nèi)的第一個(gè)段落進(jìn)行縮進(jìn)：
- div>p:first-child{
- text-indent:25px;
- }<div>
- <p>div中的第一段。這個(gè)段落將被縮進(jìn)。</p>
- <p>div中的第二段。這個(gè)段落不會(huì)被縮進(jìn)。</p>
- </div>下面的HTML中的段落將不會(huì)被匹配：
- <div>
- <h1>Header</h1>
- <p>div中的第一段，但不是div中的第一個(gè)子元素。這個(gè)段落不會(huì)被縮進(jìn)。</p>
- </div>
例子2：
在這個(gè)例子中，選擇器將對(duì)p元素中的第一個(gè)子元素為em的元素進(jìn)行匹配-并且將p元素中的第一個(gè)em元素設(shè)置為粗體：
- p:first-childem{
- font-weight:bold;
- }例如，下面的HTML中的em是段落的第一個(gè)子元素：
- <p>Iama<em>strong</em>man.</p>
例子3：
在這個(gè)例子中，選擇器將對(duì)任何元素的第一個(gè)子元素為a的元素進(jìn)行匹配-將text-decoration屬性設(shè)置為none：
- a:first-child{
- text-decoration:none;
- }
例如，下面的HTML中的第一個(gè)a元素是段落中的第一個(gè)子元素，所以沒有下劃線。
但是第二個(gè)a不是段落的第一個(gè)子元素，所以有下劃線。
- <p>訪問<ahrefahref="http://www.w3school.com.cn">W3School</a>學(xué)習(xí)CSS！
- 訪問<ahrefahref="http://www.w3school.com.cn">W3School</a>學(xué)習(xí)HTML！</p>
CSS2-:lang偽類
CSS偽類中:lang偽類使你有能力為不同的語言定義特殊的規(guī)則。在下面的例子中，:lang類為屬性值為no的q元素定義引號(hào)的類型：
- <html>
- <head>
- <styletypestyletype="text/css">
- q:lang(no){quotes:"~""~";}
- </style>
- </head>
- <body>
- <p>文字<qlangqlang="no">段落中的引用的文字</q>文字</p>
- </body>
- </html>
文章出處：標(biāo)準(zhǔn)之路(http://www.aa25.cn/css2/pseudo_class672.shtml)
【編輯推薦】
