Question

我正在尝试从li元素中选择第二个范围

HTML

<ul>
    <li>
       <span class="item1-class">item 1</span>
       <span class="item2-class">item 2</span>
    </li>
    <li>
       //Can i select this item only without 
       //adding additional class or id
       <span class="item1-class">item 1 needs to be selected</span>              
       <span class="item2-class">item 2</span>
    </li>
    <li>
       <span class="item1-class">item 1</span>
       <span class="item2-class">item 2</span>
    </li>
    <li>
       <span class="item1-class">item 1</span>
       <span class="item2-class">item 2</span>
    </li>
</ul>

我的sass css

li {
    .item1-class {
        color:red;
    }
}

我无法更改html，因此我只能使用css来选择第二个item1-class。反正有没有这样做？

Answer 1

您可以使用：nth-child /：nth-of-type伪选择器来实现此目的。

编辑显然，浏览器支持现在非常可靠，减去IE8。 http://caniuse.com/#feat=css-sel3

编辑2 显然iOS 8上的nth-child存在问题（iOS8 Safari after a pushState the :nth-child() selectors not works），因此nth-of-type是更稳定的选项。

 li:nth-of-type(2) .item1-class{
      //your styling here
 }

Answer 2

我认为您可能正在寻找类似:nth-of-type()的内容。

CSS：

li:nth-of-type(2) .item1-class {
    color:red;
}

JSFiddle

Answer 3

为了记录，我喜欢@Jesse Kernaghan的回答。使用nth-child selector是您正在寻找的。

<强> SCSS

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

如何仅选择第二个li元素的第一个子元素

3 个答案: