为每个设置第一个和最后一个元素

I'm trying to style the first and last list item within the "wrapper" class by applying the "red" class. I have multiple sections on the page with the "wrapper" class.

我正在尝试通过应用“red”类来设置“包装器”类中的第一个和最后一个列表项。我在页面上有多个带有“wrapper”类的部分。

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

3 个解决方案

#1

You can use css3 to do that:

你可以使用css3来做到这一点:

.parent li:first-child, .parent li:last-child {
    background-color: red;
}

First and last li (list item) will be read in each .parent element

将在每个.parent元素中读取第一个和最后一个li(列表项)

#2

trying to style the first and last list item within the "wrapper" class

尝试设置“包装器”类中的第一个和最后一个列表项的样式

Try utilizing :nth-of-type() , :nth-last-of-type()

尝试使用: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/

#3

Using jQuery you can write,

使用jQuery你可以写,

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

#1