理论上应该是第六个变为黄色 但是实际是第二十黄色 这个是什么情况，下面的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>
