我们在通过CSS操作多个元素时，经常需要选择第n个子元素，给它单独设置样式，比如有一个关于用户列表的 li 列表，想把其中的第三条信息标为红色，本文简单整理了一下选择第 n 个子元素的方法。CSS3 :nth-child() 选择器不支持低版本的 IE 浏览器，针对低版本的 IE 浏览器，可以通过 jQuery 选择器来渲染。
实例：
规定属于其父元素的第二个子元素的每个 p 的背景色：
p:nth-child(2) {
background:#ff0000;
}
请看下面的例子：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p:nth-child(2) { background:#ff0000; }
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
</html>
上述代码运行结果:
低版本IE浏览器可以使用JQuery的写法来支持nth-child()。
$(document).ready(function(){
$("p:nth-child(2)").css("background","#ff0000");
});
本文已通过「原本」原创作品认证，未经作者授权请勿直接转载，负责将依法追究其法律责任。
如果认为本文对您有所帮助请赞助本站
支付宝扫一扫赞助
微信钱包扫描赞助
赏