ys1:nth-child(n+4){------------------------ }
---------分割线----------
可以去学习一下css3的:nth-child() 选择器
1、first-child
first-child表示选择列表中的第一个标签。例如：li:first-child{background:#fff}
2、last-child
last-child表示选择列表中的最后一个标签，例如：li:last-child{background:#fff}
3、nth-child(3)
表示选择列表中的第3个标签，例如：li:nth-child(3){background:#fff}，代码中的3也可以改成其它数字，如4、5等。想选择第几个标签，就填写几。
4、nth-child(2n)
这个表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签，例如：li:nth-child(2n){background:#fff}
5、nth-child(2n-1)
这个表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签，例如：li:nth-child(2n-1){background:#fff}
6、nth-child(n+3)
这个表示选择列表中的标签从第3个开始到最后。
7、nth-child(-n+3)
这个表示选择列表中的标签从0到3，即小于3的标签。
8、nth-last-child(3)
这个表示选择列表中的倒数第3个标签。
记得采纳 ~
先来看例子吧：<HTML>
<head>
<style>
.red{border:2px solid red}
</style>
</head>
<body>
<div style="padding:10pxwidth:100px" class="red">
<div id="a" class="red">AAAA</div>
<div id="b" class="red">BBBB</div>
</div>
</body>
</html>
以上代码在浏览器中的显示效果如下：
AAAA
BBBB
下面通过position属性来把AAAA往上移动8px，在head的style里面加入#a{position:relativetop:-8px}即：
<HTML>
<head>
<style>
.red{border:2px solid red}
#a{position:relativetop:-8px}
</style>
</head>
<body>
<div style="padding:10pxwidth:100px" class="red">
<div id="a" class="red">AAAA</div>
<div id="b" class="red">BBBB</div>
</div>
</body>
</html>
效果如下：
AAAA
BBBB
而如果通过margin-top:-8px来调整的话，即：
<HTML>
<head>
<style>
.red{border:2px solid red}
#a{margin-top:-8px}
</style>
</head>
<body>
<div style="padding:10pxwidth:100px" class="red">
<div id="a" class="red">AAAA</div>
<div id="b" class="red">BBBB</div>
</div>
</body>
</html>
效果如下：
AAAA
BBBB
看到不同了吧，用position属性来调整的时候，只是被调整的div移动了，而下面的div不会动；用margin属性调整就不同了，下面的div也会相应的向上移动8px，但是并不影响下面的padding值。
你是不是说的这种圆点依次出现的效果？如果是的haul，那就用动画来做就可以了。下面是源码，可以参考一下咯。另外，javascript也可以来控制依次出现。
<!DOCTYPE html>
<html>
<head>
<title>圆点依次出现</title>
<meta name="keywords" content="圆点依次出现"/>
<meta name="description" content="圆点依次出现"/>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<style>
*{
padding:0
margin:0
box-shadow:1px 1px gray inset,-1px -1px gray inset
}
#box{
position:relative
width:30%
height:300px
margin:0 auto
}
.dian{
position:absolute
width:20px
height:20px
border-radius:50%
top:270px
}
#dian1{
left:70%
animation:xdian1 2.5s both linear infinite
-webkit-animation:xdian1 2.5s both linear infinite/* Safari and Chrome */
}
#dian2{
left:80%
animation:xdian2 2.5s both linear infinite
-webkit-animation:xdian2 2.5s both linear infinite/* Safari and Chrome */
}
#dian3{
left:90%
animation:xdian3 2.5s both linear infinite
-webkit-animation:xdian3 2.5s both linear infinite/* Safari and Chrome */
}
@keyframes xdian1{
0%{background:gray}
33%{background:none}
68%{background:none}
100%{background:none}
}
@keyframes xdian2{
0%{background:none}
33%{background:gray}
68%{background:none}
100%{background:none}
}
@keyframes xdian3{
0%{background:none}
33%{background:none}
68%{background:gray}
100%{background:none}
}
</style>
</head>
<body>
<div id="box">
<span id="dian1"></span>
<span id="dian2"></span>
<span id="dian3"></span>
</div>
</body>
</html>
这个源码可以参考一下咯，自己用的时候还可以继续修改优化。
