有没有一种方法可以指定元素内部的第二个<span>？

Question

我有：

<label for="modalProblemLocator">
   <span>Locator</span>
   <span>xxx</span>
</label>

<label for="modalProblemLocator">
   <span>Locator</span>
</label>

如果有两个 <span> 元素，我想让第二个变成红色。有没有一种方法只为第二个 <span> 指定选择器呢？

我尝试过的是：

.inputWithLabel {
    & > label span:last-child {
        color: @alertColor;
    }
}

但是如果只有一个 <span>，那么这个方法就不起作用了，因为第一个也是最后一个 <span>。

- Samantha J T Star

Answer 1

在CSS中使用nth-child

span{
  font-size: 30px;
  display: block;  
}
label span{
  color: blue;
}
label span:nth-child(2){
  color: red;
}

<label for="modalProblemLocator">
   <span>Locator</span>
   <span>xxx</span>
</label>
<br><br><br><br>
<label for="modalProblemLocator">
   <span>Locator</span>
</label>
<br><br><br><br>
<label for="modalProblemLocator">
   <span>Locator</span>
   <span>second</span>
     <span>third</span>
     <span>yyy</span>
     <span>xxx</span>
</label>

- Ifeanyi Chukwu

---

最好给一个带有<div>的例子，这样更通用。 - Azzabi Haythem

Answer 2

span:nth-child(2) 选取其父元素下的第二个 <span> 元素。

span:nth-child(2) {
    color: red;
}

- Ajay Kumar Ganesh

Answer 3

使用:nth-child(2)：

label span:nth-child(2) {
    color: red;
}

    <label for="modalProblemLocator">
       <span>Locator</span>
       <span>xxx</span>
       <span>xxx</span>
       <span>xxx</span>
       <span>xxx</span>
    </label>

    <label for="modalProblemLocator">
       <span>Locator</span>
    </label>

- elixenide