灵异bug请各位大神前来看一下。。。为什么div的last-child不生效呢？

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title></title>
       <style type="text/css">
           * {
               margin: 0;
               padding: 0;
           }

           div:first-child{
               width: 200px;
               height: 200px;
               background-color: yellow;
           }

           div:last-child {
               width: 200px;
               height: 200px;
               background-color: purple;
           }
       </style>
   </head>
   <body>
       <div>1</div>
       <div>2</div>
   </body>
</html>

代码如上first-child就可以生效但是last-child就不行，这是为啥呢？

补充的截图

分别用不了不同浏览器测试，全部正常显示，我看了一下楼主发的代码与截图里的对比一下，楼主截图里带有js，而帖上来的代码没有调用js，建议楼主排除法，先去掉js调用引用，单纯测试css代码，如果没有问题，那么就是js调用引起的错误。

以下截图是不同浏览器测试效果。

1.可以生效啊，我把你代码复制了可以啊。

除非你div后面加空格了div :last-child

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            div:first-child{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }

            div:last-child {
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
    </body>
</html>