您的位置:首页 > Web前端 > CSS

9、实例CSS3新增加结构性伪类选择器

2014-07-04 15:43 543 查看
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>CSS3新增加结构性伪类选择器</title>
<style type="text/css">
div{
margin-left:20px;
border:2px;
border-radius:20%;}

body
{
background-color:#666;
}
#t1 li:first-child
{
background-color:#f60;
}
#t1 li:last-child
{
background-color:#ccc;
}
#t1 li:nth-child(2)
{
background:yellow;}
#t1 li:nth-last-child(2)
{
background-color:skyblue;
}

</style>
</head>

<body>
<div style="float:left;">
明日科技
<br/>
数字出版的倡导者
<br/>
编程词典
<br/>
程序员的私人专家
<br/>
</div>
<div id="t1" style="float:left">
<h2>金缕衣</h2>
<ul>
<li>劝君莫惜金缕衣</li>
<li>劝君惜取少年时</li>
<li>花开堪折直须折</li>
<li>莫待无花空折枝</li>
</ul>
</div>

</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: