css3 选择器 nth-child()选择问题

最新推荐文章于 2023-03-28 16:04:14 发布

YdPro_

最新推荐文章于 2023-03-28 16:04:14 发布

阅读量360

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/YdPro_/article/details/106979393

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

nth-child() 是一个伪类选择器，它并不会按照标签的顺序进行选择，而是按照顺序进行选择
#例子:

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(8) # 先根据顺序选择第8行，在检查它是否是p元素，如果是p就是红色，父元素是body
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>1
<p>第一个段落。</p>2
<p>第二个段落。</p>3
<p>第三个段落。</p>4
<p>第四个段落。</p>5

<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>6

<h1>这是标题</h1>7
<p>第一个段落。</p>8
<p>第二个段落。</p>9
<p>第三个段落。</p>10
<p>第四个段落。</p>11

</body>
</html>