自己为了体验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
过河卒 阅读(1177)
评论(2) 编辑 收藏 所属分类:
W3C/Css/Html