如何定位列表中的第二个跨度

Question

我正在尝试将页面上食物菜单部分的食品价格相互对齐。我把价格放在食物的范围内，它对第一个跨度有效，但对其他跨度无效。

我知道第 n 个孩子，但它不起作用。刚刚做对错了吗？

这是小提琴：https://jsfiddle.net/Gsimelus92/z8dna4c2/3/

.apett-left ul li:nth-child(1) {
          margin-bottom:5px;
          font-size: 19px;
          font-weight: bold;
         }
     .apett-left span:nth-child(1){
          color: #AA8A45;
          margin-left:130px;
         }
     .apett-left ul li:nth-child(2) {
          margin-bottom:5px;
          font-size: 14px;
          font-weight: normal;
          border-bottom-style: dotted;
          border-color: white;
          padding-bottom: 5px;
          margin-bottom: 15px;
         }
     .apett-left span:nth-child(2){
          color: #AA8A45;
          margin-left:130px;
            }
         /********************foodder and price 2 ******/
     .apett-left ul li:nth-child(3) {
          margin-bottom:5px;
          font-size: 19px;
          font-weight: bold;
         }
     .apett-left ul li:nth-child(4) {
          margin-bottom:5px;
          font-size: 14px;
          font-weight: normal;
          border-bottom-style: dotted;
          border-color: white;
          padding-bottom: 5px;
          margin-bottom: 15px;
        }
     .apett-left span:nth-child(2){
          color: #AA8A45;
          margin-left:200px;    
         }

   <section class="pat-a">
      <div class="apett-pic">
        <img src="bbq-nachos.jpg"width="800" height="500">
      </div>
      <div class="apett-food">
          <div class="apett-left">
             <ul>
               <li>Mozzarella Sticks <span>$7.00</span></li>
               <li>Add pulled pork /homemade chilli / bbq beans <span>$1.50</span></li>
                      
               <li>Boneless Wing <span>$0.00</span></li>
               <li>Plain / spicy / sticky bbq <span>$0.00</span></li>
               <li>biscuits & bbq beans</li>
               <li>each bicuite</li>
             </ul>                        
          </div>
      </div>
</section>

Answer 1

您正在尝试选择第二个子span，但没有第二个子项，只有第一个子项。这两个span都是其li元素的第一个子元素。不要选择第一个和第二个span，而是尝试选择第一个和第二个li，然后在里面span，如下所示：

.apett-left ul li:nth-child(1) span {
    /* code */
 }
.apett-left ul li:nth-child(2) span {
    /* code */
 }