nth-child指定元素的问题，和指定的不一致

理论上应该是第六个变为黄色 但是实际是第二十黄色 这个是什么情况，下面的nth-of-type正常
.mather .son span:nth-child(6){
        background-color: yellow;
    }
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="">

    <style>
        
        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }
        ul,ol{
            list-style: none;
        }
        body{
            width: 700px;
            margin: auto;
            margin-top: 50px;
        }
        .father{
            height: 500px;
            width: 300px;
            background-color: aquamarine;
            margin: auto;
            float: left;
        }
        .mather{
            height: 500px;
            width: 380px;
            background-color: aquamarine;
            margin: auto;
            float:right;
        }
        .one,.two,.three,.four{
            height: 25px;
            width: 25px;
            background-color: brown;
            margin-bottom: 5px;
            /* float: left; */
        }
        .father .son .three{
            background-color: blue;
        }
        .father .oldSon div+div{
            background-color: yellow;
        }
        .father .daughter div:nth-child(odd){
            background-color: red;
        }
        .mather .son span:nth-child(6){
            background-color: yellow;
        }
        /* .mather .son span:nth-of-type(6){
            background-color: yellow;
        } */
        .sonSpan{
            display: inline-block;
            height: 25px;
            width: 25px;
            background-color: brown;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="child son">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
        </div>
        <div class="child oldSon">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
        </div>
        <div class="child daughter">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
        </div>
        <div class="child oldDaughter">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
        </div>
    </div>
    <div class="mather">
        <div class="child son">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
            <span class="sonSpan A">A</span>
            <span class="sonSpan B">B</span>
            <span class="sonSpan C">C</span>
            <span class="sonSpan D">D</span>
            <span class="sonSpan E">E</span>
            <div class="sonSpan F">F</div>
            <span class="sonSpan G">G</span>
            <span class="sonSpan H">H</span>
            <span class="sonSpan H">I</span>
            <span class="sonSpan H">G</span>
            <span class="sonSpan H">K</span>
            <span class="sonSpan H">M</span>
        </div>
        <div class="child oldSon">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
        </div>
        <div class="child daughter">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
        </div>
        <div class="child oldDaughter">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <div class="four"></div>
        </div>
    </div>
</body>
</html>

nth-child这个指的是子级的第几个元素

nth-child的意思就是 指定元素的父级的第几个子元素