html - 为什么 css nth-child 不适用于最后一个第二个元素？

Question

在下面的示例中，第 4 个元素未根据 css 对齐。

$( "span" ).each(function( index ) {
  
  $(".edit").append('<input class="inputtext" type="text" value="' + $(this).text() +
	'" name="'+index+'" id="input_'+$(this).attr("id")+'"/></br>');
  });

  
  $('.inputtext').on('keyup',function(){
    var abc = $(this).val();
    console.log(abc);
   	var id= $(this).attr('id').split('_')[1];
    $('#'+id).text(abc);
});

.editable:nth-child(1) {
  top:10px;
  left:50px;
}

.editable:nth-child(2){
  top:30px;
  left:50px;
}
  
.editable:nth-child(3) {
  top:60px;
  left:50px;
}

.editable:nth-child(4) {
  top:90px;
  left:50px;
}

.editable:last-child {
  top:120px;
  left:50px;
}

.text {
  color:#FFFFFF; 
  background-color:black;
  position:absolute;
  padding:5px;
}

.photoStyle {
  height:500px;
  width:600px;
}

.edit {
  border:2px solid black;
  width:600px;
}

.inputtext {
  height:25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
    <img src="http://bloximages.newyork1.vip.townnews.com/stltoday.com/content/tncms/assets/v3/editorial/8/12/8126e948-17fe-5102-b12f-908660e0f7e4/57d981d98e495.image.jpg?resize=1200%2C679" class="photoStyle" />
   
    <span class="text editable" id="t1">1</span> 
    <span class="text editable" id="t2">2</span> 
    <span class="text editable" id="t3">3</span> 
    <span class="text editable" id="t4">4</span> 
    <span class="text editable" id="t5">5</span> 
</div>

<div class="edit"></div>

Answer 1

它工作正常。规则是说，editable 类的元素是父级下的第 4 个元素。第一个 child 是 img，而不是第一个 span。