CSS ?? ???

CSS ?? ???

CSS ?? ???? ???? ? ?? ?? ??? ???? ? ?????.

Syntax

?? ??? ??:

selector:pseudo-class {property:value;}

CSS ???? ?? ???? ??? ? ????.

selector.class:pseudo-class {property:value;}

anchor pseudo-class

CSS? ???? ??????? ??? ?? ??? ??? ???? ??? ? ????. CSS ???? ???

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <style>
        a:link {color:#FF0000;}    /* 未訪問(wèn)的鏈接 */
        a:visited {color:#00FF00;} /* 已瀏覽過(guò)的鏈接 */
        a:hover {color:#FF00FF;}   /* 鼠標(biāo)劃過(guò)的鏈接 */
        a:active {color:#0000FF;}  /* 已選中的鏈接 */
    </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>

Note? ?? ?? ?????. a:hover? a:link? a:visited ?? ?? ??, ??? ??? ??? ??? ??? ???. ??.

??: a:active? a:hover ?? ?? ???.

??: ?? ??? ??? ????? ???? ????.

????? ???? ??? ???

?? ??? ? CSS ???

?? ???? CSS ???? ?? ??? ? ????:

a.red:visited {color: #FF0000;}

< ;a ??? ="red" href="css-syntax.html ">CSS ??</a>

? ??? ??? ????? ????? ?????.

Instance

Use :focus

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(wǎng)(php.cn)</title>
    <style>
        input:focus
        {
            background-color:yellow;
        }
    </style>
</head>

<body>
<form action="" method="get">
    姓名: <input type="text" name="fname" /><br>
    留言: <input type="text" name="content" /><br>
    <input type="submit" value="Submit" />
</form>


</body>
</html>

????? ???? ??? ???

?? CSS ?? ???/??

??? ?? ??? ???????. ? ? ?? ?? :before:after??p:lang(it)

Selector	Example	?? ??
:checked	input:checked	??? ?? ?? ?? ??
:disabled	input:disabled	????? ?? ?? ?? ??
:empty	p:empty	?? ??? ?? ?? p ?? ??
:enabled	input:enabled	???? ?? ?? ?? ??
:first-of- type	p:first-of-type	p ??? ? ?? ??? ? ?? p ?? ??? ?????
:in-range	input:in-range	??? ?? ?? ??? ?????. ?
: ???? ??	??: ???? ??	???? ?? ?? ?? ??
: ??? ??	p: ??? ??	?? p ??? ??? ?? ?? ??
: ??? ??	p:last-of-type	?? ??? ? p ??? ??? p ??? ?????
:not(selector)	:not(p)	p
:nth-child(n)	p:nth-child(2)	?? p ?? ? ? ?? ?? ??? ?????
:nth-last-child(n)	p:nth- last-child(2)	?? p ?? ? ? ?? ??? ?? ?? ??
:nth-last-of-type(n)	p:nth-last-of-type( 2)	Select ????? ? ?? ?? ??? p
:nth-of-type(n)	p:nth-of-type(2)	? ?? p ?? ?? p
:only-of-type	p:only-of-type	p
:only-child	p :only-child	??? ???? ?? p ??? ?????. ??? ?? ???
:???	input:???	"??" ??? ?? ??? ?????
:out-of-range	input :out-of-range	??? ???? ?? ??? ?????. ??? ??? ??? ?
:?? ??	input:?? ??	?? ?? ??? ?? ?? ?? ??
:??-??	input:??-??	Select ?? ?? ??? ?? ?? ??
:required	input:required	"??" ???? ??? ?? ??? ?????
:root	root	document
: target	#news: target	?? ???? #news ??? ?????(?? ??? ??? URL? ?????)
:valid	input:valid	??? ?? ?? ?? ?? ?? ??
:link	a:link	???? ?? ?? ?? ??
:visited	a:visited	?? ?? ??? ??
:active	a:active	?? ?? ??
:hover	a:hover	?? ?? ???? ????.
:focus	??:focus	?? ? ???? ? ?? ??
:first-letter	p:first-letter	? <p> ??? ? ?? ??
:first-line	p:first -line	? <p> ??? ? ?? ?? ?????.
:first-child	p:first-child	???? ?? ?? <]p>? ? ?? ?? ??? ?????.
p:before	? <p> ?? ?? ???? ?????
p:after	?? ? <p> ?? ?? ???? ?????. (	)
<p> ??

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style> input:focus { background-color:yellow; } </style> </head> <body> <form action="" method="get"> 姓名: <input type="text" name="fname" /><br> 留言: <input type="text" name="content" /><br> <input type="submit" value="Submit" /> </form> </body> </html>

?????? ???

????