如何選擇僅只有第二li元素

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> 

我頂嘴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顯然有一個與nth-child在iOS 8（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克納漢的回答。使用nth-child selector是你正在尋找。

SCSS

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