CSS3 :nth-child() 选择器

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

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

版权声明： 夏日阳光发表于 2019年3月30日21:30:28
转载注明：https://www.pieruo.com/7265.html

文章目录
繁