一、CSS偽類：
CSS偽類用于為某些元素添加特別的效果。
二、CSS偽類的語(yǔ)法：
selector:pseudo-class {property: value}
selector.class:pseudo-class {property: value}
注意：CSS偽類和類的不同在于：
①偽類以:開(kāi)頭，類以.開(kāi)頭
②偽類不能用在HTML元素的class屬性定義中，而類可以
三、Anchor偽類：
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
注意：a:hover必須在a:link和a:visited之后，而a:active必須在a:hover之后
四、CSS偽類總結(jié)：
CSS的類和偽類合用的情況，一般發(fā)生在需要對(duì)同一個(gè)HTML元素在不同行為或環(huán)境下設(shè)置不同的樣式時(shí)使用。此時(shí)CSS的類可以設(shè)置該HTML元素的基本屬性，而用偽類設(shè)置不同行為下的屬性。
因?yàn)镃SS的類只能定義靜態(tài)的屬性，對(duì)于需要根據(jù)HTML元素不同行為表現(xiàn)進(jìn)行不同設(shè)置的情況，就只能用偽類了。在使用偽類后，我們可以在HTML元素定義中只指明class，而不需要指明偽類，因?yàn)闉g覽器會(huì)自動(dòng)地識(shí)別并應(yīng)用。
例：
<style type="text/css">
a:link { color: #FF0000 }
a:visited { color: #00FF00 }
a:hover { color: #FF00FF }
a:active { color: #0000FF }
</style>
<a href="default.asp" target="_blank">This is a link</a>
五、CSS偽元素：
CSS偽元素和偽類一樣，都是為了給某些元素添加特別的效果。
六、CSS偽元素語(yǔ)法：
selector:pseudo-element {property: value}
selector.class:pseudo-element {property: value}
七、CSS偽元素-first-line和first-letter：
"first-line"偽元素用于為某個(gè)選擇器的第一行文本添加特殊效果。例如：
p:first-line {color:#0000ff;font-variant:small-caps}
<p>Some text that ends up on two or more lines</p>
則顯示的效果如下：
SOME TEXT THAT ENDS
up on two or more lines
"first-letter"偽元素用于偽選擇器的第一個(gè)字符文本添加特殊效果。例如：
p:first-letter {color:#ff0000;font-size:xx-large}
<p>The first words of an article
</p>
則顯示的效果如下：
The first words of an article...
和偽類一樣，偽元素也可以和CSS的類搭配
p.article:first-letter {color:#ff0000}
<p class="article">A paragraph in an article</p>
我們還可以將多個(gè)偽元素結(jié)合起來(lái)一起使用。例如：
p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}
<p>The first words of an article</p>
-------------------------------------------------------------
生活就像打牌，不是要抓一手好牌，而是要盡力打好一手爛牌。
posted on 2008-08-01 21:26
Paul Lin 閱讀(333)
評(píng)論(0) 編輯 收藏 所屬分類:
Web基礎(chǔ)