自己為了體驗(yàn)CSS選擇器而寫(xiě)的一個(gè)例子。主要是模擬一個(gè)菜單條，實(shí)際的環(huán)境是Firefox2.0.0.11
演示截圖：
Html代碼：
<html>
<head>
<style type="text/css">
<!--
@import url("CssSelector.css");
-->
</style>
</head>
<body>
<h2>CSS選擇器演示</h2>
<hr>
說(shuō)明：CSS的基本選擇器有元素選擇器，后代選擇器(關(guān)聯(lián)選擇器)，Class選擇器，ID選擇器，偽類(lèi)；<br>
高級(jí)選擇器有子選擇器，相鄰選擇器以及屬性選擇器。<br>
在實(shí)際使用中，通常通過(guò)各種選擇器的組合使用來(lái)精確控制文檔樣式。<br>
注意：對(duì)于不同瀏覽器對(duì)于CSS選擇器種類(lèi)支持各有區(qū)別，一般來(lái)說(shuō)基本選擇器是支持的。
<hr>
<div class="headContent">
<ul>
<li id="firstItem">
<a href="#" >
閱讀
</a>
</li>
<li>
<a href="#" rel="me">
發(fā)現(xiàn)
</a>
</li>
<li>
<a href="#" rel="you me it">
評(píng)論
</a>
</li>
<li>
<a href="#" rel="me">
小組
</a>
</li>
<li>
<a href="#">
譯消息
</a>
</li>
<li>
<a href="#">
翻譯
</a>
</li>
<li>
<a href="#">
自己
</a>
</li>
<li id="endItem">
<a href="#">
幫助
</a>
</li>
</ul>
</div>
</body>
CSS代碼：
/*元素選擇器*/
body{color:#000000;font-size:13px}
/*后代選擇器*/
body h2{
color:red;
font-size:32px;
}
/*類(lèi)選擇器*/
.headContent{
layout-flow: horizontal;
PADDING: 6px 0px 0px 1px;
MARGIN: 4px 0px 3px 5px;
}
/*組合選擇器：類(lèi)選擇器與后代選擇器的結(jié)合使用*/
.headContent ul{
font-size:16px;
list-style-type:none;
}
.headContent li{
float:left;
margin:0px 0px 4px 4px;
padding:10px;
background-color:#c5c5c5;
}
/*偽類(lèi)*/
a{
TEXT-DECORATION: none;
}
a:link{
color:blue;
}
a:visited{
color:green;
font-size:85%;
}
a:hover{
background-color:yellow;
TEXT-DECORATION: underline;
}
/*ID選擇器*/
#endItem{
font-size:20px;
font-weight:bold;
}
#firstItem{
font-size:24px:
background-color:write;
}
/*子選擇器*/
#endItem>a{
cursor : help;
}
/*相鄰選擇器*/
h2+hr{
border-style :dotted;
}
/*屬性選擇器:找屬性rel等于me的a元素*/
a[rel="me"]{
cursor : wait;
}
/*屬性選擇器:找屬性rel包含it的a元素*/
a[rel~="it"]{
cursor :crosshair;
}
示例代碼下載：CssSelertor.rar
平凡而簡(jiǎn)單的人一個(gè)，無(wú)權(quán)無(wú)勢(shì)也無(wú)牽無(wú)掛。一路廝殺，只進(jìn)不退，死而后已，豈不爽哉！
收起對(duì)“車(chē)”日行千里的羨慕；收起對(duì)“馬”左右逢緣的感嘆；目標(biāo)記在心里面，向前進(jìn)。一次一步，一步一腳印，跬步千里。
這個(gè)角色很適合現(xiàn)在的我。
posted on 2007-12-17 23:37
過(guò)河卒 閱讀(1197)
評(píng)論(2) 編輯 收藏 所屬分類(lèi):
W3C/Css/Html