每个样式的第一个和最后一个元素答案

【问题标题】：Style first and last element for each每个样式的第一个和最后一个元素
【发布时间】：2015-08-31 14:50:39
【问题描述】：

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

【问题讨论】：

在重新标记您的问题之后，我现在意识到这实际上可能是也可能不是 jQuery 问题。您是在寻找 CSS 解决方案、jQuery 解决方案还是其中之一？您需要在问题描述中指定这一点，因为目前还不清楚。

标签： jquery jquery-selectors each

【解决方案1】：

使用jQuery你可以写，

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

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：