自己為了體驗CSS選擇器而寫的一個例子。主要是模擬一個菜單條，實際的環境是Firefox2.0.0.11
演示截圖：
Html代碼：
<html>
<head>
<style type="text/css">
<!--
@import url("CssSelector.css");
-->
</style>
</head>
<body>
<h2>CSS選擇器演示</h2>
<hr>
說明：CSS的基本選擇器有元素選擇器，后代選擇器(關聯選擇器)，Class選擇器，ID選擇器，偽類；<br>
高級選擇器有子選擇器，相鄰選擇器以及屬性選擇器。<br>
在實際使用中，通常通過各種選擇器的組合使用來精確控制文檔樣式。<br>
注意：對于不同瀏覽器對于CSS選擇器種類支持各有區別，一般來說基本選擇器是支持的。
<hr>
<div class="headContent">
<ul>
<li id="firstItem">
<a href="#" >
閱讀
</a>
</li>
<li>
<a href="#" rel="me">
發現
</a>
</li>
<li>
<a href="#" rel="you me it">
評論
</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;
}
/*類選擇器*/
.headContent{
layout-flow: horizontal;
PADDING: 6px 0px 0px 1px;
MARGIN: 4px 0px 3px 5px;
}
/*組合選擇器：類選擇器與后代選擇器的結合使用*/
.headContent ul{
font-size:16px;
list-style-type:none;
}
.headContent li{
float:left;
margin:0px 0px 4px 4px;
padding:10px;
background-color:#c5c5c5;
}
/*偽類*/
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
平凡而簡單的人一個，無權無勢也無牽無掛。一路廝殺，只進不退，死而后已，豈不爽哉！
收起對“車”日行千里的羨慕；收起對“馬”左右逢緣的感嘆；目標記在心里面，向前進。一次一步，一步一腳印，跬步千里。
這個角色很適合現在的我。
posted on 2007-12-17 23:37
過河卒 閱讀(1189)
評論(2) 編輯 收藏 所屬分類:
W3C/Css/Html