每個樣式的第一個和最後一個元素

我試圖通過應用「紅色」類來設置「包裝器」類中的第一個和最後一個列表項的樣式。我在頁面上使用「包裝器」類有多個部分。每個樣式的第一個和最後一個元素

<div class="wrapper"> 
    <div class="section"> 
    <ul class="parent"> 
     <li class="child">List Item</li> 
     <li class="child">List Item</li> 
     <li class="child">List Item</li> 
     <li class="child">List Item</li> 
     <li class="child">List Item</li> 
     <li class="child">List Item</li> 
    </ul> 
    </div> 
</div> 
<div class="wrapper"> 
    <div class="section"> 
    <ul class="parent"> 
     <li class="child">List Item</li> 
     <li class="child">List Item</li> 
     <li class="child">List Item</li> 
     <li class="child">List Item</li> 
     <li class="child">List Item</li> 
     <li class="child">List Item</li> 
    </ul> 
    </div> 
</div>

https://jsfiddle.net/n2bg3zu4/

來源

2015-06-15 Seth Tipton

RETA後我的問題現在已經發生，這可能會或可能不會成爲jQuery的問題。你在尋找一個CSS解決方案，一個jQuery解決方案還是其中之一？你需要在你的問題描述中指定它，因爲目前還不清楚。 – BoltClock

您可以使用CSS3來做到這一點：

第一次和最後李（列表項），將在每個.parent元素

來源

2015-06-15 23:23:47

也許放一個代碼片段來演示？ – AmmarCSE

試圖讀取在「包裝器」中設置第一個和最後一個列表項的樣式類

嘗試利用:nth-of-type()，:nth-last-of-type()

.wrapper li:nth-of-type(1), 
 
.wrapper li:nth-last-of-type(1) { 
 
    background-color: red; 
 
}

<div class="wrapper"> 
 
    <div class="section"> 
 
    <ul class="parent"> 
 
     <li class="child">List Item</li> 
 
     <li class="child">List Item</li> 
 
     <li class="child">List Item</li> 
 
     <li class="child">List Item</li> 
 
     <li class="child">List Item</li> 
 
     <li class="child">List Item</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="section"> 
 
    <ul class="parent"> 
 
     <li class="child">List Item</li> 
 
     <li class="child">List Item</li> 
 
     <li class="child">List Item</li> 
 
     <li class="child">List Item</li> 
 
     <li class="child">List Item</li> 
 
     <li class="child">List Item</li> 
 
    </ul> 
 
    </div> 
 
</div>

的jsfiddle https://jsfiddle.net/n2bg3zu4/4/

來源

2015-06-15 23:43:04 guest271314

使用jQuery，你可以寫，

$('.wrapper .parent li:first-child, .wrapper .parent li:last-child').addClass('red')

來源

2015-06-17 03:41:58

每個樣式的第一個和最後一個元素

回答

相關問題