<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>循环使用样式 </title>
<style type="text/css">
div{
margin-left:20px;
border:2px;
border-radius:20%;}
body
{
background-color:#666;
}
li:nth-child(3n+1)/* n=Z* */
{
background-color:#00F;
}
li:only-child
{
background-color:#6FC;
}
</style>
</head>
<!--
使用h2:nth-child(odd) 的意思是,当div元素中的第奇数个子元素是h2元素的时候使用。
-->
<body>
<div id="t1" style="float:left">
<h2>金缕衣</h2>
<ul>
<li>劝君莫惜金缕衣</li>
<li>劝君惜取少年时</li>
<li>花开堪折直须折</li>
<li>莫待无花空折枝</li>
<li>劝君莫惜金缕衣</li>
<li>劝君惜取少年时</li>
<li>花开堪折直须折</li>
<li>莫待无花空折枝</li>
<li>劝君莫惜金缕衣</li>
<li>劝君惜取少年时</li>
<li>花开堪折直须折</li>
<li>莫待无花空折枝</li>
</ul>
<ul>
<li>只有一个LI</li>
</ul>
</div>
</body>
</html>
12、实例 循环使用样式
最新推荐文章于 2023-03-07 09:44:28 发布