nth-child 从多类 div 中选择错误的元素答案

【问题标题】：nth-child selecting wrong element from a multi-class divnth-child 从多类 div 中选择错误的元素
【发布时间】：2015-02-03 16:28:49
【问题描述】：

我有一些 divs 有 2 个类 - 它们都有 ticket 类，其中一些有 visible 类：

<div class="ticket hidden">BLA 1</div>
<div class="ticket hidden">BLA 2</div>
<div class="ticket hidden">BLA 3</div>
<div class="ticket visible">BLA 4</div>
<div class="ticket visible">BLA 5</div>
<div class="ticket visible">BLA 6</div>
<div class="ticket visible">BLA 7</div>
<div class="ticket visible">BLA 8</div>

当我用以下方式解决它时：

.visible:nth-child(5) {
 text-decoration: underline;
}

我得到 BLA 5，我想要 BLA 8

如何处理特定的 .visible 元素？

JSFiddle.

【问题讨论】：

可以使用 :last-child 吗？ o 走到最后只是巧合吗？
nth-child doesn't respond to class的可能重复
CSS :nth-of-type selector breaks on non-matching childs的可能重复

标签： html css css-selectors pseudo-class

【解决方案1】：

:nth-child further 将匹配元素限制为其父元素的第 n 个子元素。没有 CSS 选择器可以匹配 第 n 个具有 x 类的元素。

对于给定的标记，您可以使用+ 组合器：

.visible ~ .visible ~ .visible ~ .visible ~ .visible {
  /*
   * matches .visible element with at least 4 previous .visible siblings
   */
  text-decoration: underline;
}
.visible ~ .visible ~ .visible ~ .visible ~ .visible ~ .visible {
  /*
   * matches .visible element with at least 5 previous .visible siblings
   */
  text-decoration: line-through;
}

<div class="ticket hidden">Hidden</div>
<div class="ticket hidden">Hidden</div>
<div class="ticket visible">Visible 1</div>
<div class="ticket visible">Visible 2</div>
<div class="ticket hidden">Hidden</div>
<div class="ticket hidden">Hidden</div>
<div class="ticket visible">Visible 3</div>
<div class="ticket visible">Visible 4</div>
<div class="ticket hidden">Hidden</div>
<div class="ticket hidden">Hidden</div>
<div class="ticket visible">Visible 5</div>
<div class="ticket visible">Visible 6</div>
<div class="ticket hidden">Hidden</div>
<div class="ticket hidden">Hidden</div>
<div class="ticket visible">Visible 7</div>
<div class="ticket visible">Visible 8</div>

【讨论】：

【解决方案2】：

~~nth-child() 不关心你想检查哪个类。它总是计算 DOM 元素中的所有同级元素。~~

~~也许你想给:nth-of-type一个机会：developer.mozilla.org~~

也许最好的解决方案是使用一些 jQuery 并添加另一个类来附加 underline 样式

【讨论】：

啊，我明白了。不幸的是，这仅适用于 html 元素而不是类。因为你所有的元素都是<div>s，所以它也不起作用，抱歉。
谢谢，我会这样做的:)

【解决方案3】：

您可以在 visible 类的开头添加一个 div 并将其指定为 nth-child http://jsfiddle.net/7uap9v21/3/

<div class="visible-holder">
<div class="visible ticket">BLA 4</div>
<div class="visible ticket">BLA 5</div>
<div class="visible ticket">BLA 6</div>
<div class="visible ticket">BLA 7</div>
<div class="visible ticket">BLA 8</div>
</div>

【讨论】：