为什么 css 第 n 个子元素对最后一个第二个元素不起作用？

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 个元素。第一个孩子是img，而不是第一个span。

Answer 2

您没有考虑img元素，即该组中的第一个孩子。将您的数字调整一个，它就可以了。

$( "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 { left:50px; }
.editable:nth-child(2) { top:10px; }
.editable:nth-child(3) { top:30px; }
.editable:nth-child(4) { top:60px; }
.editable:nth-child(5) { top:90px; color:yellow;}
.editable:last-child { top:120px; }
.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>

您也可以将<span>元素包装在它们自己的<div>中，并保持所有数字不变，这将起作用，因为img将不再是该组中的孩子。

<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" />
  <!-- By wrapping all the spans in their own div, the numbers work as expected. -->
  <div>
    <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>

Answer 3

如果您不知道元素的位置，可以使用:nth-of-type(x)来选择它们。

这里:nth-child(1)指的是图像:)

.editable {
  left:50px;
 }
.editable:nth-of-type(1) {
  top:10px;
}
.editable:nth-of-type(2){
  top:30px;
}
  
.editable:nth-of-type(3) {
  top:60px;
}
.editable:nth-of-type(4) {
  top:90px;
}
.editable:nth-of-type(5) {
  top:120px;
}
.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;
}

<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 4

第

4 个.editable跨度与您的任何 CSS 选择器都不匹配，因为它实际上是其父级的第 5 个子级。 img元素是那里的第一个子元素。

如果您想重做此操作，使其仅取决于其他.editable元素，则可以执行以下操作：

.editable {top:10px; left:50px;}
.editable + .editable {top:30px;}
.editable + .editable + .editable {top:60px;}
.editable + .editable + .editable + .editable {top:90px;}
.editable + .editable + .editable + .editable + .editable {top:120px;}

使用+（相邻同级选择器）。