:nth-child与:nth-of-type介绍

1、选择器:nth-child

定义

:nth-child(n)选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。
其中n的关键字有odd 和 even,odd表示下标为奇数的子元素，even表示下标为偶数数的子元素。
复制代码

其表达的意思大概就是假如有这么一个样式：

p:nth-child(2){background:black}
复制代码

，如果要让此样式生效则必须满足p的父元素下第2个子元素为p元素，否则此样式将作废。就如下面这个例子

采用element选择器做前缀

采用element选择器来当做前缀

CSS代码：

.nth-child {
  p,span {
    font-size: 14px;
    line-height: 20px;
  }
  span {
    display: block;
  }
  p:nth-child(2) {
    background: #000;
  }
}
复制代码

HTML代码：

<div class="nth-child">
  <span v-for="item in 5" v-if="!isDeleteSpan">
    我是第{{item}}个span元素
  </span>
  <p v-for="item in 5">
    我是第{{item}}个p元素
  </p>
</div>
<button @click="isDeleteSpan = !isDeleteSpan">{{isDeleteSpan?'显示':'隐藏'}}span元素</button>
复制代码

其中点击按钮可以很明确的看到当span元素消失时，第二个p元素才显示特定的样式。

采用class选择器做前缀

同样的使用类选择器也是要同时满足第n个位置的元素拥有此class类名，否则样式无法生效。

采用class选择器来当做前缀

2、选择器:nth-of-type

定义

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。n 可以是数字、关键词或公式。
其中n的关键字有odd 和 even,odd表示下标为奇数的子元素，even表示下标为偶数数的子元素。
复制代码

这个选择器的目的性就比较强烈了，他必定会去寻找你指定的那个元素类型的第二个元素，而不是像:nth-child那样死板的认定父元素的第二个元素是不是你指定的元素类型。

采用element选择器做前缀

采用element选择器来当做前缀

CSS代码：

.nth-type {
    p,span {
      font-size: 14px;
      line-height: 20px;
    }
    span {
      display: block;
    }
    p:nth-of-type(2) {
      background: #000;
    }
}
复制代码

HTML代码：

<div class="nth-type">
  <p>
    我是第1个p元素
  </p>
  <span v-for="item in 5" v-if="!isDeleteSpan">
    我是第{{item}}个span元素
  </span>
  <p v-for="item in 5">
    我是第{{item+1}}个p元素
  </p>
</div>
<button @click="isDeleteSpan = !isDeleteSpan">{{isDeleteSpan?'显示':'隐藏'}}span元素</button>
复制代码

其中点击按钮并不影响p元素的样式显示

采用class选择器做前缀

如果采用class选择器当前缀的话就比较有意思了，如果不同的element元素的你指定的位置元素都拥有你所指定的class，那这些元素都会显示你所要求的样式就像下面这个demo一样。

采用class选择器来当做前缀

.nth-type {
    p,span {
      font-size: 14px;
      line-height: 20px;
    }
    span {
      display: block;
    }
    .type-item:nth-of-type(2) {
      background: #000;
    }
  }
复制代码

HTML代码：

<div class="nth-type">
  <p>
    我是第1个p元素
  </p>
  <span :class="{'type-item': !isDelSpanClass}" v-for="item in 5" v-if="!isDeleteSpan">
    我是第{{item}}个span元素
  </span>
  <p class="type-item" v-for="item in 5">
    我是第{{item+1}}个p元素
  </p>
</div>
<button @click="isDeleteSpan = !isDeleteSpan">{{isDeleteSpan?'显示':'隐藏'}}span元素</button>
<button @click="isDelSpanClass = !isDelSpanClass">{{isDelSpanClass?'添加':'删除'}}span元素的class</button>
复制代码

其中可以看到我并没有给第一个p元素添加type-item的class，但第二个p元素仍然显示了相应的样式，这就表示了其父元素下每种element的第n个元素只要拥有此类名就会显示你规定的样式。

总结：

在快速学习使用相应技术时，往往会忽略其真正存在的功能性，乍看之下两种选择器长相相似，真正深入发现其性格能力大为不同。

转载于:https://juejin.im/post/5cb69401e51d456e79545c58