nth-of-type() 详解

nth-of-type() 详解

ele:nth-of-type(n)表示选择父元素下的第 n 个 ele 元素，其中 n 可以是正整数、公式或者关键字。同时， ele 一般是标签选择器。

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .box {
    width: 400px;
    height: 200px;
    margin: 100px auto;
    border: 1px solid #ccc;
  }
  li {
    padding-left: 16px;
    list-style: none;
  }
</style>

<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

1. n 作为正整数、

当 n 作为一个具体的数时，从 1 开始生效。

<style>
  /* .... */
  li:nth-of-type(1), li:nth-of-type(4) {
    background-color: #eee;
    color: #1890ff;
  }
</style>

2. n 作为关键字

even | odd，选择偶数还是奇数。

<style>
  /* .... */
  li:nth-of-type(even) {
    background-color: #eee;
    color: #1890ff;
  }
</style>

3. n 作为公式

作为公式时， n 是从 0 开始的。

<style>
  /* .... */
  li:nth-of-type(n+2):nth-of-type(-n+4) {
  background-color: #eee;
  color: #1890ff;
}
</style>

上面组合使用的，表示从第二行到第四行，闭区间。

也可以将其拆开使用， li:nth-of-type(n+2) 表示从第二行到最末尾，li:nth-of-type(-n+4) 表示从开始到第四行。

4. 作用范围：

ele:nth-of-type() 作用的是父元素下第几个 ele 元素，如果中间有其他元素，则略过。

<style>
  * {
    margin: 0;
    padding: 0;
  }
  .box {
    width: 400px;
    height: 200px;
    margin: 100px auto;
    border: 1px solid #ccc;
  }
  p:nth-of-type(3) {
    background-color: #eee;
    color: #1890ff;
  }
</style>
<div class="box">
  <p>1</p>
  <p>2</p>
  <div>3-div</div>
  <p>4</p>
  <p>5</p>
</div>