国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

CSS 偽類

CSS 偽類(Pseudo-classes)


CSS偽類是用來(lái)添加一些選擇器的特殊效果。


語(yǔ)法

偽類的語(yǔ)法:

selector:pseudo-class {property:value;}

CSS類也可以使用偽類:

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

anchor偽類

在支持 CSS 的瀏覽器中,鏈接的不同狀態(tài)都可以以不同的方式顯示

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</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="http://miracleart.cn/css/css-css_tutorial.html" 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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

注意: 在CSS定義中,a:hover 必須被置于 a:link 和 a:visited 之后,才是有效的。

注意: 在 CSS 定義中,a:active 必須被置于 a:hover 之后,才是有效的。

注意:偽類的名稱不區(qū)分大小寫。


偽類和CSS類

偽類可以與 CSS 類配合使用:

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

<a class="red" href="css-syntax.html">CSS Syntax</a>

如果在上面的例子的鏈接已被訪問,它會(huì)顯示為紅色。


CSS - :first - child偽類

您可以使用 :first-child 偽類來(lái)選擇元素的第一個(gè)子元素

注意:在IE8的之前版本必須聲明<!DOCTYPE> ,這樣 :first-child 才能生效。

匹配第一個(gè) <p> 元素

在下面的例子中,選擇器匹配作為任何元素的第一個(gè)子元素的 <p> 元素:

實(shí)例

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

<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>注意:</b>對(duì)于 :first-child 工作于 IE8以及更早版本的瀏覽器, DOCTYPE必須已經(jīng)聲明.</p>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


匹配所有<p> 元素中的第一個(gè) <i> 元素

在下面的例子中,選擇相匹配的所有<p>元素的第一  <i>元素:

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
p > i:first-child
{
	color:blue;
} 
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 當(dāng) :first-child 作用于 IE8以及更早版本的瀏覽器,  DOCTYPE必須已經(jīng)定義.</p>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


匹配所有作為第一個(gè)子元素的<p>元素中的所有<i>元素 

在下面的例子中,選擇器匹配所有作為元素的第一個(gè)子元素的 <p> 元素中的所有 <i> 元素:

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
p:first-child i
{
	color:blue;
} 
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 當(dāng):first-child 作用于 IE8及更早版本的瀏覽器, DOCTYPE 必須已經(jīng)定義.</p>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


CSS - :lang 偽類

:lang 偽類使你有能力為不同的語(yǔ)言定義特殊的規(guī)則

注意:IE8必須聲明<!DOCTYPE>才能支持;lang偽類。

在下面的例子中,:lang 類為屬性值為 no 的q元素定義引號(hào)的類型:

實(shí)例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
q:lang(no)
{
	quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在這個(gè)例子中,:lang定義了q元素的值為lang =“no”</p>
<p><b>注意:</b> 僅當(dāng) !DOCTYPE已經(jīng)聲明時(shí) IE8支持 :lang.</p>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


更多實(shí)例

實(shí)例:為超鏈接添加不同樣式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>將鼠標(biāo)移至鏈接上改變樣式.</p>

<p><b><a class="one" href="http://miracleart.cn/css/css-css_tutorial.html" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="http://miracleart.cn/css/css-css_tutorial.html" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="http://miracleart.cn/css/css-css_tutorial.html" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="http://miracleart.cn/css/css-css_tutorial.html" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="http://miracleart.cn/css/css-css_tutorial.html" target="_blank">This link changes text-decoration</a></b></p>
</body>

</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

這個(gè)例子演示了如何為超鏈接添加其他樣式。

實(shí)例:使用 :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="lname" /><br>
<input type="submit" value="Submit" />
</form>

<p><b>注意:</b>僅當(dāng) !DOCTYPE已經(jīng)聲明時(shí) IE8支持 :focus.</p>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

這個(gè)例子演示了如何使用 :focus偽類。


所有CSS偽類/元素

選擇器示例示例說(shuō)明
:checkedinput:checked選擇所有選中的表單元素
:disabledinput:disabled選擇所有禁用的表單元素
:emptyp:empty選擇所有沒有子元素的p元素
:enabledinput:enabled選擇所有啟用的表單元素
:first-of-typep:first-of-type選擇每個(gè)父元素是p元素的第一個(gè)p子元素
:in-rangeinput:in-range選擇元素指定范圍內(nèi)的值
:invalidinput:invalid選擇所有無(wú)效的元素
:last-childp:last-child選擇所有p元素的最后一個(gè)子元素
:last-of-typep:last-of-type選擇每個(gè)p元素是其母元素的最后一個(gè)p元素
:not(selector):not(p)選擇所有p以外的元素
:nth-child(n)p:nth-child(2)選擇所有p元素的第二個(gè)子元素
:nth-last-child(n)p:nth-last-child(2)選擇所有p元素倒數(shù)的第二個(gè)子元素
:nth-last-of-type(n)p:nth-last-of-type(2)選擇所有p元素倒數(shù)的第二個(gè)為p的子元素
:nth-of-type(n)p:nth-of-type(2)選擇所有p元素第二個(gè)為p的子元素
:only-of-typep:only-of-type選擇所有僅有一個(gè)子元素為p的元素
:only-childp:only-child選擇所有僅有一個(gè)子元素的p元素
:optionalinput:optional選擇沒有"required"的元素屬性
:out-of-rangeinput:out-of-range選擇指定范圍以外的值的元素屬性
:read-onlyinput:read-only選擇只讀屬性的元素屬性
:read-writeinput:read-write選擇沒有只讀屬性的元素屬性
:requiredinput:required選擇有"required"屬性指定的元素屬性
:rootroot選擇文檔的根元素
:target#news:target選擇當(dāng)前活動(dòng)#news元素(點(diǎn)擊URL包含錨的名字)
:validinput:valid選擇所有有效值的屬性
:linka:link選擇所有未訪問鏈接
:visiteda:visited選擇所有訪問過(guò)的鏈接
:activea:active選擇正在活動(dòng)鏈接
:hovera:hover把鼠標(biāo)放在鏈接上的狀態(tài)
:focusinput:focus選擇元素輸入后具有焦點(diǎn)
:first-letterp:first-letter選擇每個(gè)<p> 元素的第一個(gè)字母
:first-linep:first-line選擇每個(gè)<p> 元素的第一行
:first-childp:first-child選擇器匹配屬于任意元素的第一個(gè)子元素的 <]p> 元素
:beforep:before在每個(gè)<p>元素之前插入內(nèi)容
:afterp:after在每個(gè)<p>元素之后插入內(nèi)容
:lang(language)p:lang(it)為<p>元素的lang屬性選擇一個(gè)開始值