CSS3 选择器 :nth-child 与 :nth-of-type 区别

news2024/11/26 1:48:59

一、`:nth-child`

1.1 说明

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

注意：如果第 N 个子元素与选择的元素类型不同则样式无效！

1.2 示例

<style>
div>p:nth-child(2){
    color:red;
}
</style>
<div>
    <p>我是第1个段落</p>
    <p>我是第2个段落</p><!--符合条件：1、是<p>元素，2、父元素<div>的第二个元素。这里被选择，会变成红色。-->
    <p>我是第3个段落</p>
</div>
<div>
    <p>我是第1个段落</p>
    <span>我是第1个文本</span><!--不符合条件：不是<p>元素，没有被选择-->
    <p>我是第2个段落</p>
</div>
复制代码

二、`:nth-of-type`

2.1 说明

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。n 可以是数字、关键词或公式。

2.2 示例

<style>
div>p:nth-of-type(2){
    color:red;
}
</style>
<div>
    <p>我是第1个段落</p>
    <p>我是第2个段落</p><!--符合条件：1、是特定元素类型<p>，2、是父元素<div>的第二个<p>元素。这里被选择，会变成红色-->
    <p>我是第3个段落</p>
</div>
<div>
    <p>我是第1个段落</p>
    <blockquote>第1个引用</blockquote>
    <p>我是第2个段落</p><!--符合条件：1、是特定元素类型<p>，2、是父元素<div>的第二个<p>元素。这里被选择，会变成红色-->
    <p>我是第3个段落</p>
</div>
复制代码

三、举例

两者都是选择标签，但是又不完全相同，区别如下
nth-of-type：是当前元素的兄弟元素的第n个。
nth-child：是当前元素的兄弟节点的第n个。
一个是元素，一个是节点，这个就是他们的区别。

比如:

   <style>
        li:nth-child(4) {
          color: pink;
        }

        li:nth-of-type(4) {
          color: cyan;
        }
  </style>
    
  <body>
      <ul>
        <li>1</li>
        <li>2</li>
        <h7>HELLO</h7>   //在li中间添加一个h7标签
        <li>3</li>
        <li>4</li>
      </ul>
 </body>

我们来看看结果就知道了