Question

我正在尝试通过应用“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/

Answer 1

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

--no-packages

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

Answer 2

尝试设置＆＃34;包装器中的第一个和最后一个列表项的样式＆＃34; 类

尝试使用:nth-of-type()，:nth-last-of-type()

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

使用jQuery，你可以写，

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

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

3 个答案: