CSS3 选择器查找同一类的第二个 div

Question

我需要一个 CSS 选择器，它可以找到 2 中具有相同类的第二个 div。我看过nth-child()，但这不是我想要的，因为我看不到进一步澄清我想要的课程的方法。如果有帮助，这 2 个 div 将是文档中的兄弟姐妹。

我的 HTML 看起来像这样：

<div class="foo">...</div>
<div class="bar">...</div>
<div class="baz">...</div>
<div class="bar">...</div>

我想要第二个 div.bar（或者最后一个 div.bar 也可以）。

Answer 1

可以组合选择器：

.bar:nth-child(2)

表示“具有类 bar 的事物”，也是第二个孩子。

Answer 2

我关于:nth-of-type 的原始答案是完全错误的。感谢 Paul 指出这一点。

这里的“类型”一词仅指“元素类型”（如div）。事实证明，选择器div.bar:nth-of-type(2) 和div:nth-of-type(2).bar 的含义相同。两个选择元素都 [a] 是其父级的第二个 div，并且 [b] 具有类 bar。

所以我知道的唯一纯 CSS 解决方案，如果你想选择某个选择器的所有元素，除了第一个，是通用兄弟选择器：

.bar ~ .bar

http://www.w3schools.com/cssref/sel_gen_sibling.asp

---

我的原始（错误）答案如下：

随着 CSS3 的到来，还有另一种选择。首次提出问题时它可能不可用：

.bar:nth-of-type(2)

http://www.w3schools.com/cssref/sel_nth-of-type.asp

这将选择满足.bar 选择器的第二个元素。

如果您想要特定类型元素的第二个和最后一个（或除第一个之外的所有元素），通用兄弟选择器也可以正常工作：

.bar ~ .bar

http://www.w3schools.com/cssref/sel_gen_sibling.asp

它更短。但当然，我们不喜欢重复代码，对吧？ :-)

Answer 3

更新：这个答案最初是在 2008 年写的，当时nth-of-type 支持充其量是不可靠的。今天我想说你可以安全地使用.bar:nth-of-type(2) 之类的东西，除非你必须支持 IE8 和更早版本。

---

2008 年的原始答案如下（请注意，我不会再推荐这个了！）：

如果您可以使用Prototype JS，您可以使用此代码设置一些样式值，或者添加另一个类名：

// set style:
$$('div.theclassname')[1].setStyle({ backgroundColor: '#900', fontSize: '1.2em' });
// OR add class name:
$$('div.theclassname')[1].addClassName('secondclass'); // pun intentded...

（我没有测试这段代码，也没有检查是否真的存在第二个 div，但是这样的东西应该可以工作。）

但是，如果您正在生成 html 服务器端，您不妨在第二项上添加一个额外的类...

Answer 4

HTML

<h1> Target Bar Elements </h1>

<div class="foo">Foo Element</div>
<div class="bar">Bar Element</div>
<div class="baz">Baz Element</div>
<div class="bar">Bar Second Element</div>
<div class="jar">Jar Element</div>
<div class="kar">Kar Element</div>
<div class="bar">Bar Third Element</div>

CSS

.bar {background:red;}
.bar~.bar {background:green;}
.bar~.bar~.bar {background:yellow;}

DEMO https://jsfiddle.net/ssuryar/6ka13xve/

Answer 5

您的 HTML 的结构究竟是什么？

如果 HTML 是这样的，之前的 CSS 将起作用：

CSS

.foo:nth-child(2)

HTML

<div>
 <div class="foo"></div>
 <div class="foo">Find me</div>
...
</div>

但是如果你有下面的 HTML 就不行了。

<div>
 <div class="other"></div>
 <div class="foo"></div>
 <div class="foo">Find me</div>
 ...
</div>

简单地说，没有选择器用于从之前的选择器的其余部分获取匹配项的索引。

Answer 6

对于正在寻找与 jQuery 兼容的答案的人：

$('.foo:eq(1)').css('color', 'red');

HTML：

<div>
  <div class="other"></div>
  <div class="foo"></div>
  <div class="foo">Find me</div>
  ...    

Answer 7

您是否有理由不能通过 Javascript 执行此操作？我的建议是使用通用规则 (.foo) 来定位选择器，然后重新解析以使用 Javascript 获取最后一个 foo 并设置您需要的任何其他样式。

或者按照 Stein 的建议，如果可以的话，只需添加两个类：

<div class="foo"></div>
<div class="foo last"></div>

.foo {}
.foo.last {}

Answer 8

.parent_class div:first-child + div

我刚刚使用上面的方法通过 + 选择器链接 first-child 来找到第二个 div。

Answer 9

首先您必须选择父元素并为父元素设置:nth-of-type(n)，然后选择您想要的元素。像这样：

#topmenu li:nth-of-type(2) ul.childUl {

这将从顶部菜单中选择第二个子菜单。 #topmenu li 是父元素。

HTML：

<ul id="topmenu">
    <li>
        <ul class="childUl">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul class="childUl">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul class="childUl">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>