为什么nth-child(1)选择ul li 下面的a标签后会全部改变所有 ul li a的样式呢?

代码如下?这是为何呢?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <style type="text/css">
            ul li a:nth-child(1) {
                color: yellow;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </body>
</html>

这个nth-child(1)不应该放在a上,因为这样,每个li下的第一个a标签都会生效,改成

ul li:nth-child(1) a {
     color: yellow;
  }

 

https://www.runoob.com/cssref/sel-nth-child.html菜鸟教程看一下