一、CSS偽類：
CSS偽類用于為某些元素添加特別的效果。
二、CSS偽類的語法：
selector:pseudo-class {property: value}
selector.class:pseudo-class {property: value}
注意：CSS偽類和類的不同在于：
①偽類以:開頭，類以.開頭
②偽類不能用在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偽類總結：
CSS的類和偽類合用的情況，一般發生在需要對同一個HTML元素在不同行為或環境下設置不同的樣式時使用。此時CSS的類可以設置該HTML元素的基本屬性，而用偽類設置不同行為下的屬性。
因為CSS的類只能定義靜態的屬性，對于需要根據HTML元素不同行為表現進行不同設置的情況，就只能用偽類了。在使用偽類后，我們可以在HTML元素定義中只指明class，而不需要指明偽類，因為瀏覽器會自動地識別并應用。
例：
<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偽元素語法：
selector:pseudo-element {property: value}
selector.class:pseudo-element {property: value}
七、CSS偽元素-first-line和first-letter：
"first-line"偽元素用于為某個選擇器的第一行文本添加特殊效果。例如：
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"偽元素用于偽選擇器的第一個字符文本添加特殊效果。例如：
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>
我們還可以將多個偽元素結合起來一起使用。例如：
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 閱讀(340)
評論(0) 編輯 收藏 所屬分類:
Web基礎