关于first-child、last-child、nth-child( )失效问题关于first-child、last-

不知道各位死鬼在开发中有没有遇到过first-child、last-child、nth-child()失效问题

1、废话不多说直接贴代码（first-child、last-child失效）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>first-child、last-child失效</title>
    <link rel="stylesheet" href="" />
    <style type="text/css">
      .box p:first-child {
        color: #62d;
      }
      .box p:last-child {
        color: #62d;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h2>top</h1>
      <p>vue【我应该是紫色】</p>
      <p>react</p>
      <p>taro</p>
      <p>uni-app</p>
      <p>electron【我应该是紫色】</p>
      <h2>bottom</h1>
    </div>
  </body>
</html>

代码运行结果如下图，可以发现first-child和last-child处于失效的状态

思考下为什么？？？

其实在使用first-child时，其绑定的元素前面不能有兄弟节点。同理last-child也是如此。正确代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>first-child、last-child失效</title>
    <link rel="stylesheet" href="" />
    <style type="text/css">
      .box p:first-child {
        color: #62d;
      }
      .box p:last-child {
        color: #62d;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!-- <h2>top</h1> -->
      <p>vue【我应该是紫色】</p>
      <p>react</p>
      <p>taro</p>
      <p>uni-app</p>
      <p>electron【我应该是紫色】</p>
      <!-- <h2>bottom</h1> -->
    </div>
  </body>
</html>

2、nth-child()失效

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>nth-child()失效</title>
    <link rel="stylesheet" href="" />
    <style type="text/css">
      .box p:nth-child(1) {
        color: #62d;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h2>top</h1>
      <p>vue【我应该是紫色】</p>
      <p>react</p>
      <p>taro</p>
      <p>uni-app</p>
      <p>electron</p>
    </div>
  </body>
</html>

根据上面的first-child和last-child经验，同理是兄弟节点造成的失效，正确代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>nth-child()失效</title>
    <link rel="stylesheet" href="" />
    <style type="text/css">
      .box p:nth-child(2) {
        color: #62d;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h2>top</h1>
      <p>vue【我应该是紫色】</p>
      <p>react</p>
      <p>taro</p>
      <p>uni-app</p>
      <p>electron</p>
    </div>
  </body>
</html>

或者

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>nth-child()失效</title>
    <link rel="stylesheet" href="" />
    <style type="text/css">
      .box p:nth-child(1) {
        color: #62d;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!-- <h2>top</h1> -->
      <p>vue【我应该是紫色】</p>
      <p>react</p>
      <p>taro</p>
      <p>uni-app</p>
      <p>electron</p>
    </div>
  </body>
</html>