# last-child 与 last-of-type

> 同学们遇到过给同一组元素的最后一个元素设置css失效的情况吗？我遇到过，当时使用:last-child居然不起作用，看到名字不科学啊，明明是“最后一个元素”，那为什么设置CSS失效呢？今天来一探究竟吧

* 先看一组`:last-child`正常工作的代码

```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>:last-child、:last-of-type</title>
        <script src="../../lib/jquery-2.1.0.js"></script>
        <style>
            ul {
                margin: 100px 0;
            }
            li {
                list-style: circle;
                border-bottom: 1px solid #000000;
            }
            li:last-child {
                border-color: red;
            }
        </style>
    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <!--<p>我是来骚扰的</p>-->
        </ul>
    </body>
</html>
```
![效果1](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180507-091957@2x.png)

* 再先看一组`:last-child`不正常工作的代码

```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>:last-child、:last-of-type</title>
        <script src="../../lib/jquery-2.1.0.js"></script>
        <style>
            ul {
                margin: 100px 0;
            }
            li {
                list-style: circle;
                border-bottom: 1px solid #000000;
            }
            li:last-child {
                border-color: red;
            }
        </style>
    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <p>我是来骚扰的</p>
        </ul>
    </body>
</html>
```


![效果2](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180507-092046@2x.png)

问题抛出来了，那么来研究下:last-child和:last-of-type究竟是何方神圣。

1. :last-child：**The last-child CSS pseudo-class represents the last element among a group of sibling elements.（:last-child这个css伪类代表的一组兄弟元素当中最后一个元素）但经过代码发现，它说的一组元素应该是指其父元素的所有子元素且类型为:last-child前面指定的类型的一组元素。**

2. :last-of-type：**The last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.（**:last-of-type这个css伪类代表其类型的一组兄弟元素中的最后一个元素**）所以它指的是和**:last-of-type前面的元素类型一致的一组元素的最后一个元素

同理：:nth-last-child和:nth-last-of-type的区别在于父元素的子元素中且与:nth-last-child前面的元素类型一致的最后一个元素

做个验证

* :nth-last-child可以正常工作的代码

```
 <!DOCTYPE html>
  <html>
      <head>
          <meta charset="UTF-8">
          <title>:last-child、:last-of-type</title>
          <script src="../../lib/jquery-2.1.0.js"></script>
          <style>
              ul {
                  margin: 100px 0;
              }
              li {
                  list-style: circle;
                  border-bottom: 1px solid #000000;
              }
              li:nth-last-child(1){
                  border-color: red;
              }
          </style>
      </head>

      <body>
          <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <!--<p>我是来骚扰的</p>-->
          </ul>
      </body>
  </html>

```


![效果3](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180507-092145@2x.png)

* :nth-last-child不能正常工作的代码

```
<!DOCTYPE html>
  <html>
      <head>
          <meta charset="UTF-8">
          <title>:last-child、:last-of-type</title>
          <script src="../../lib/jquery-2.1.0.js"></script>
          <style>
              ul {
                  margin: 100px 0;
              }
              li {
                  list-style: circle;
                  border-bottom: 1px solid #000000;
              }
              li:nth-last-child(1){
                  border-color: red;
              }
          </style>
      </head>

      <body>
          <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
              <p>我是来骚扰的</p>
          </ul>
      </body>
  </html>
```

![](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180507-092232@2x.png)

* 接下来:nth-last-of-type闪亮登场

```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>:last-child、:last-of-type</title>
        <script src="../../lib/jquery-2.1.0.js"></script>
        <style>
            ul {
                margin: 100px 0;
            }
            li {
                list-style: circle;
                border-bottom: 1px solid #000000;
            }

            li:nth-last-of-type(1){
                border-color: red;
            }
        </style>
    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <p>我是来骚扰的</p>
        </ul>
    </body>
</html>
```

![](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180507-092358@2x.png)