主页 个人前端笔记 jquery和css3的表达式选择器
admin
发表于2012-11-11 19:07:13    只看楼主 楼主
头衔:  精益求精
注册时间: 2012-10-07
用户组: 日常管理组
发帖数:  502
金币数:  186
短消息
<html>
<script src="jquery-1.4.2.js"></script>
<style>
div:nth-child(3n+1){background:red}
</style>
<body>
<div style="width:50px;height:50px;border:1px solid red"></div>
<div style="width:50px;height:50px;border:1px solid red"></div>
<div style="width:50px;height:50px;border:1px solid red"></div>
<div style="width:50px;height:50px;border:1px solid red"></div>
<div style="width:50px;height:50px;border:1px solid red"></div>
<div style="width:50px;height:50px;border:1px solid red"></div>
<div style="width:50px;height:50px;border:1px solid red"></div>
<div style="width:50px;height:50px;border:1px solid red"></div>
<div style="width:50px;height:50px;border:1px solid red"></div>
<div style="width:50px;height:50px;border:1px solid red"></div>
<script>
$("div:nth-child(3n)").css({background:"#ff0000"});
</script>
</body>
</html>


css3的写法,ie8不支持
可以换成兼容的jquery的写法
表达式n从1开始,而jquery的eq()是从0开始
 
admin
发表于2012-11-11 19:07:24 1楼
头衔:  精益求精
注册时间: 2012-10-07
用户组: 日常管理组
发帖数:  502
金币数:  186
短消息
【表达式n从1开始,而jquery的eq()是从0开始】

nth-child(number) 指的是里面的number表达式>0

以上10个div

如果只作用第5个div,则$("div:nth-child(5)")

作用后5个,则$("div:nth-child(n+6)")

作用前5个,则$("div:nth-child(-n+5)")

回复人
回复内容

Powered BY YouYaX
个人自主开发论坛,从2010年10月份开发至今!

操作管理