posts - 110,  comments - 152,  trackbacks - 0

自己为了体验CSS选择器而写的一个例子。主要是模拟一个菜单条,实际的环境是Firefox2.0.0.11

演示截图:
 CssSelector

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 过河卒 阅读(1170) 评论(2)  编辑  收藏 所属分类: W3C/Css/Html

只有注册用户登录后才能发表评论。


网站导航:
 
文章来自: http://www.blogjava.com/ponzmd/ (彭俊-过河卒) 转贴请声明!
访问统计: