结构伪类选择器E F:nth-child(n)和E F:nth-of-type(n)的区分

最新推荐文章于 2022-07-04 17:37:52 发布

无月天涯

最新推荐文章于 2022-07-04 17:37:52 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： css 选择器结构伪类选择器

本文链接：https://blog.youkuaiyun.com/qq_41609345/article/details/96697940

本文详细解析了CSS3中的EF:nth-child(n)和EF:nth-of-type(n)两种选择器的区别与用法。通过实例展示了如何精确选择目标元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用E F:nth-child(n)和E F:nth-of-type(n)的关键点

我们先来看看这两种选择器的解释

E F:nth-child(n)：选择父级元素E的第n个子元素是F的，（n可以使1、2、3），关键字为even、odd
E F:nth-of-type(n)：选择父元素内具有只等类型的第n个F子元素

我的理解

这两种选择器最简单的区别方式正如代码中的，一个是child主导，一个是type主导

E F:nth-child(n)是不管三七二十一直接找到父级元素的第n个不管你是<p>标签<div>标签还是其他任意标签。选择器会先选择你然后再进行对比，看第n个元素是不是F，是F则确认选择，不是则放弃选择
E F:nth-of-type(n)则是先找到type，也就是父元素下面的所有F元素，再把其中的第n个确认选择。
在我看来E F:nth-of-type(n)目的性更强，也更易使用， E F:nth-of-type(n)直接可以直观的确认自己想要确认的是哪一种的哪一个元素。

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title>使用CSS3结构伪类选择器</title>
   <style>
   	* {
   		border:  1px solid red;
   	}

   	/*选择到父级里的第一子元素是p的*/
   	p:nth-child(1){
   		background: yellow;
   	}

   	/*父元素里第2个类型为p的元素*/
   	p:nth-of-type(2){
   		background: blue;
   	}
   </style>
</head>
<body>
   <h2>结构伪类选择器</h2>
   <p>p1</p>
   <p>p2</p>
   <p>p3</p>
   <ul>
   	<li>
   		<p>1</p>
   		<p>2</p>
   		<p>3</p>
   	</li>
   </ul>
</body>
</html>