CSS3 :nth-child() 选择器

2019年3月30日21:30:28 评论 402

我们在通过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");

});

本文已通过「原本」原创作品认证，未经作者授权请勿直接转载，负责将依法追究其法律责任。

CSS

文章目录

繁
微信

QQ

249223175
选择一种方式联系我们！