有没有办法可以在元素内指定第二个 ？

Question

我有：

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

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

如果里面有两个  元素，我希望第二个是红色的。有没有一种方法可以只为第二个  指定一个选择器？

我尝试的是：

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

但如果只有一个 ，这将不起作用，因为第一个也是唯一的  也将是最后一个。

Answer 1

使用: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>

Answer 2

span:nth-child(2) 选择作为其父元素的第二个子元素的每个元素

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

Answer 3

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

有没有办法可以在元素内指定第二个 <span> ？

Is there a way I can specify the second <span> inside an element?

html

css

css-selectors