锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
3 {" W6 K ?7 c* A/ G6 E; ia:visited {color: #00FF00} /* 已访问的链接 */0 e+ I& O, f0 h& P7 A) _, U
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */) m: E' I8 b1 C a) ?8 P% ?
a:active {color: #0000FF} /* 选定的链接 */' x3 W; s6 {, j/ U
亲自试一试
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
CSS2 - :first-child 伪类
您可以使用 :first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解，所以有必要举例来说明。考虑以下标记：
<div>
. J6 m* s" y% Q( G: S; z6 o* S$ \% O<p>These are the necessary steps:</p>4 |4 _0 c p' I
<ul>
% ~& C% v* M; | F<li>Intert Key</li>
7 i* d% e! I+ _<li>Turn key <strong>clockwise</strong></li>
" N7 d+ O! s. G# Q$ i( {; F' K<li>Push accelerator</li>
9 s# d0 |# [9 Q2 R. C/ d. q/ o</ul>* h$ S4 {" y/ s9 j& p; K5 R
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p># \' z) O% p* t% s" }
</div>
- I9 A' s& y6 j9 C3 I* T! B' y9 ]
在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
给定以下规则：
p:first-child {font-weight: bold;}
( t/ L2 X9 K/ d+ o- f3 x4 L) @li:first-child {text-transform:uppercase;}
; t6 L* r3 S1 [第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。
请访问该链接，来查看这个 :first-child 实例的效果。
提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。
为了使您更透彻地理解 :first-child 伪类，我们另外提供了 3 个例子：
例子 1 - 匹配第一个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素：
<html>. v, T3 x+ h" L- \+ x0 P k
<head>
( o) V0 v; c+ x! D<style type="text/css">
' P R2 m7 Y3 z' q4 A0 T; D& ]5 ep:first-child {
e( n' R* F) \6 m; [7 ]2 P color: red;! ?1 R. v/ o6 [$ J6 s& B' B
} - C5 [) D) k4 q3 A0 U- ^
</style>6 R8 C* J* X. {% B9 c0 ]8 W7 G
</head>4 }( b' q' `" }' P' |5 ]9 e
4 y2 k$ D, g3 t {7 Y3 O) \. V7 m3 s
<body>
; Z8 P% Q) W2 r. y0 ^# @<p>some text</p>
, V% F' t. \6 j5 Y# K8 U<p>some text</p>
7 Y# w8 r0 S; ~+ h9 |</body>, N! c, f5 u2 {, m
</html>
TIY
例子 2 - 匹配所有 <p> 元素中的第一个 <i> 元素
在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：
<html>
5 }4 b0 k2 M4 F2 S( ^. i( b& ~<head>( P# q {4 _$ n. W5 | p) W
<style type="text/css">' @- a7 v: M) C5 n
p > i:first-child {& _7 i) F7 p i; o4 T
font-weight:bold;2 |. |6 I L) L0 C" P
} , d% p r. d( f% v8 Q. O
</style>! S+ v9 o1 p& z0 z
</head>& ~) }. P6 A2 p `8 ^5 i0 c
( s$ { g; ?0 q/ V<body>' T: o3 Y) J, m
<p>some <i>text</i>. some <i>text</i>.</p> k8 y: S6 m7 w/ \$ a
<p>some <i>text</i>. some <i>text</i>.</p>& }$ R- @7 p- W: e
</body>
' ]* `9 {6 U+ A5 x7 C3 P</html>TIY
例子 3 - 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
<html>
! b9 |9 N: q5 C<head>' \& o7 @" t S: B; s* A! l
<style type="text/css">4 n" G* E0 n- Q+ M- t5 w
p:first-child i {
' c/ L0 o$ y3 q! w% e color:blue;
5 O6 i# Y _- z: b }
' Z* f/ W$ X, z6 p; ]+ |</style>
; h* ?+ ?. X3 V V' |</head>
. ^1 ^, `3 z: n* D
! ^, M5 L; \2 N) S4 `% J- }$ ~<body>' z9 ~5 |# K' T% ~% V6 `; V
<p>some <i>text</i>. some <i>text</i>.</p>' H1 `/ K0 d- g' ^( A ]2 a7 I8 R7 H0 J G
<p>some <i>text</i>. some <i>text</i>.</p>
5 v- Z7 S, @' r! g& @</body>1 Z& B6 }4 m/ |3 N$ l
</html>
TIY
CSS2 - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：
<html>
8 e2 t2 u: }% \5 |* \4 J9 @<head>0 t8 G" R# r& u# p
/ G- G; z$ k! A. |. J) @6 ~& v<style type="text/css">, |0 ~ |2 P. N8 d
q:lang(no)
9 S; Z! E( Y4 G7 e ?) E# e0 M {: J7 G" m5 u) B9 f- j t
quotes: "~" "~"
, F- O* g; n2 K; ]8 @! q6 C }' R/ ~/ T. F- Y* V3 Z" L) `; L+ @
</style>
* L: [) E" j, L& D' L
7 q- x" f7 {; q1 m3 J3 D( P! G</head>- _2 X: n% k/ A* e' W
& y/ z9 b+ l/ T7 x; a! Z7 H<body>8 m% V4 P$ K7 R8 m
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
7 \6 h& H4 n. [: @4 L5 v</body></html>
发表于 11-28-2011 05:38