CSS ?? ???
CSS ?? ??? -- ?? ???
CSS ?? ???? CSS ???? ?????.
?? ??? ??? ??? ?? ?????. HTML?? ??? ????? ???? ??? XML ??? ????? ?????.
??? ?? ???? ?? ??????
CSS? ??? ? ?? HTML ??? ??? ????? ?? ??? ??? ???? ?? ? ?? ??? ???? ?? ??? ?????. ??? HTML ?? ??? ??? ?? ?? ??? ??? ?? ????? ???? ?? ?? ??? ?? ? ????. ??? ? ?? ????.
???? HTML ?? ?? ???? ??? ?
HTML ?? ???
HTML ?? ??
?? ???? ???? ??? ??? ?? ?? ?? ??, ?? ??? ?? ??? ? ????. ?? ? ???? ?? ??
?? ???? ??, ?? ?? ????? ? ?? ??? ?? ??? ?????. ????? HTML ????? ?? ? ?? ?????
CSS :link pseudo-class
:link -- CSS :link pseudo-class, ?? ???? ?? ??? ?? ???? ???
??: :link
CSS ??: CSS1
??:
? ??? ?????. ???? ???? ?? ???
??? ???(?: ????)? ????? ???? ?? ??? ??? ??? ??? ?????. CSS? ? ??? ??? ???? ?? ?? ??? :link ? :visited? ?????.
???? ?? ??? ??? ??? ?? ??????.
??(???? "??"? ??)
??? ??? ?? ??:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :link 偽類示例，對(duì)指定鏈接設(shè)置顏色</title>
<style type="text/css" media="all">
a.dreamdu:link
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
<p><a class="dreamdu" href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
</body>
</html>CSS: ??? ?? ???
??: :visited
CSS ??: CSS1
?? URL: http://www.dreamdu.com/ css/pseudo -class_visited/
??:
???? ??? ??? ??
??? ???(?: ????)?? ????? ???? ?? ??? ??? ??? ?????. ??? ?? CSS? ? ?? ??? ???? ?? ?? ??? :link ? :visited? ?????.
???? ?? ??? ??? ??? ?? ??????.
??, ??? "??" ??
??
:visited
a:visited
a.class:visited
?
a:visited
{
color: green;
}
?? ??? ?? ?? ???? ??
?? ??? ?? ?????. ?? ??? ?????? ?? ????. ?? ?? HTML?? ?? ?? ???? href ??? ?? ??? ?????. ??? ?? ? CSS ??? ?????.
a:visited
{
color: green;
}
:visited
{
color: green;
}
?: ??? ??? ?? ????? ?? ??? ?????. ?? ??? ?? ?? ????? ??? ???? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :visited 偽類示例，設(shè)置已訪問鏈接的顏色</title>
<style type="text/css" media="all">
a:link
{
color:red;
}
a:visited
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
</body>
</html> CSS :hover ?? ???
? ??? ???? ??(??? ???)? ????? ? ??? ??? ????. ??? ? ???
??: :hover
CSS ??: CSS2
??:
??(??? ???)? ??? ???? ??? ?? ??? ????? ?? ??? ??
?????(????)? ???? ?? ??? ?? ??? ??? ??? ? ????. CSS? ??? ??? ?? hover, active, focus? ? ?? ?? ???? ?????.
?? ? ?? ?? ???? ??? ????. ?? ????? ??? ??? ?? ??? ??? ??? ? ????.
:hover ?? ???? ???? ???? ?? p? ???? ??? ???? ??? ??? ? ??? ? ????. ???? ???? ??? ??? ??? ?? ??? ??? ?????.
hover(???? "???, ????"? ??)
??
: hover
a:hover
a.class:hover
????
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :hover 偽類示例</title>
<style type="text/css" media="all">
a:hover
{
color:yellow;
background:blue;
font-size:small;
}
p:hover
{
color:yellow;
background:blue;
font-size:large;
}
div:hover
{
color:red;
background:lime;
font-size:small;
}
</style>
</head>
<body>
<a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a>
<p>IE6、IE7(Q)、IE8(Q)不支持除了連接之外元素的hover偽類</p>
<div>IE6、IE7(Q)、IE8(Q)不支持除了連接之外元素的hover偽類</div>
</body>
</html>?? ?? ???
CSS? ???? ???? ?????? ??? ??? ??? ??? ???? ??? ? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :anchor 偽類示例</title>
<style>
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 */
</style>
</head>
<body>
<p><b><a href="#" target="_blank">這是一個(gè)鏈接</a></b></p>
<p><b>注意：</b> a:hover 必須在 a:link 和 a:visited 之后，需要嚴(yán)格按順序才能看到效果。</p>
<p><b>注意：</b> a:active 必須在 a:hover 之后。</p>
</body>
</html>??: CSS ???? a:hover? a:link ? a:visited to ?? ????? ???. ?????.
??: CSS ???? a:active? a:hover ?? ????? ?????.
??: ?? ??? ??? ????? ???? ????.
CSS :first-child ?? ???
??: :first-child
CSS ??: CSS2
?? URL: http://www.dreamdu.com/css/pseudo-class_first-child/
??:
? ?? ??? ? ?? ?? ??? ?????. ?: div?? ?? p ??? ???? ? ?? ?? ?? ???? ???? ? ?? p ??? ???? ? ????.
first? ???? "? ??"? ?????. child? ???? "??, ?? ??"? ?????.
??
:first-child
E:first-child
E1>E2: first-child
?
p > ??:? ??-??
{
color:lime;
??:red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>這是個(gè)測試</p>
<p>這是個(gè)測試</p>
<p><b>注意:</b>對(duì)于 :first-child 工作于 IE8以及更早版本的瀏覽器, DOCTYPE必須已經(jīng)聲明.</p>
</body>
</html>CSS :lang ?? ???
: lang ?? ???? ??? ??? ?? ?? ??? ???? ??? ?????.
??: IE8? ;lang ?? ???? ????? <!DOCTYPE>? ???? ???.
????
