我们在通过CSS操作多个元素时,经常需要选择第n个子元素,给它单独设置样式,比如有一个关于用户列表的 li 列表,想把其中的第三条信息标为红色,本文简单整理了一下选择第 n 个子元素的方法。CSS3 :nth-child() 选择器不支持低版本的 IE 浏览器,针对低版本的 IE 浏览器,可以通过 jQuery 选择器来渲染。
实例:
规定属于其父元素的第二个子元素的每个 p 的背景色:
1 2 3 | p:nth-child(2) { background:#ff0000; } |
请看下面的例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!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()。
1 2 3 | $(document).ready(function(){ $("p:nth-child(2)").css("background","#ff0000"); }); |
本文已通过「原本」原创作品认证,未经作者授权请勿直接转载,负责将依法追究其法律责任。
如果认为本文对您有所帮助请赞助本站
支付宝扫一扫赞助
微信钱包扫描赞助
赏