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

您正在尝试选择第二个孩子<article class="-jsDraggable"> <header class="-jsDraggable"> <h1 class="-jsDraggable">Heading</h1> </header> <main class="-jsDraggable"> <p class="-jsDraggable">...</p> </main> </article>，但是没有第二个孩子，只有第一个。两个span都是其span元素的第一个孩子。与其选择第一个li和第二个span，还不如先选择第一个li和第二个span，如下所示：

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

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

1 个答案: