我不能选择span: CSS CSS

Question

我想访问.中的span元素。对于第一个span元素，我希望设置图像"image1.png“和第二个元素"image2.png”。

以下是我的HTML代码：

​

.payment-group .payment-method:nth-child(0){
  .payment-method-title label span:before{
    content: url(https://icon-library.com/images/delivery-service-icon/delivery-service-icon-6.jpg);
  }
} 
.payment-group.payment-method:nth-child(1){
  .payment-method-title label span:before{
    content: url(https://icon-library.com/images/bank-transfer-icon/bank-transfer-icon-6.jpg);
  }
}

<div class="payment-group">
  <div class="payment-method">
    <div class="payment-method-title field choice">
      <input type="radio" class="radio" id="cashondelivery" value="cashondelivery"/>
      <label class="label">
        <span>Cash on delivery</span>
      </label>
    </div>
  </div>
  <div class="payment-method">
    <div class="payment-method-title field choice">
      <input type="radio" class="radio" id="banktransfer" value="banktransfer"/>
      <label class="label">
        <span>Bank transfer</span>
      </label>
    </div>
  </div>
</div>

​

有人能帮我吗？(我使用的较少，但您可以帮助我使用简单的CSS)

Answer 1

这里有几个问题：

nth-在CSS中从1开始，而不是0。

选择器的嵌套不存在于纯CSS中，这段代码段“扁平”它们。

空间是CSS选择器中一个非常重要的字符。这是一个“组合器”。第二个选择器在支付方法之前遗漏了它。

现在，伪元素的前面应该有一个双冒号，如：：pseudo (这表示一个伪元素，而不是一个伪类)。

​

.payment-group .payment-method:nth-child(1) .payment-method-title label span::before {
  content: url(https://icon-library.com/images/delivery-service-icon/delivery-service-icon-6.jpg);
}

.payment-group .payment-method:nth-child(2) .payment-method-title label span::before {
  content: url(https://icon-library.com/images/bank-transfer-icon/bank-transfer-icon-6.jpg);
}

<div class="payment-group">
  <div class="payment-method">
    <div class="payment-method-title field choice">
      <input type="radio" class="radio" id="cashondelivery" value="cashondelivery" />
      <label class="label">
        <span>Cash on delivery</span>
      </label>
    </div>
  </div>
  <div class="payment-method">
    <div class="payment-method-title field choice">
      <input type="radio" class="radio" id="banktransfer" value="banktransfer" />
      <label class="label">
        <span>Bank transfer</span>
      </label>
    </div>
  </div>
</div>

​