CSS CSS3 选择器查找同一类的第二个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/306062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 selector to find the 2nd div of the same class
提问by mpeters
I need a CSS selector that can find the 2nd div of 2 that has the same class. I've looked at nth-child()but it's not what I want since I can't see a way to further clarify what class I want. These 2 divs will be siblings in the document if that helps.
我需要一个 CSS 选择器，它可以找到具有相同类的 2 的第二个 div。我已经看过了，nth-child()但这不是我想要的，因为我看不到进一步阐明我想要的课程的方法。如果有帮助，这 2 个 div 将是文档中的兄弟。
My HTML looks something like this:
我的 HTML 看起来像这样：
<div class="foo">...</div>
<div class="bar">...</div>
<div class="baz">...</div>
<div class="bar">...</div>
And I want the 2nd div.bar (or the last div.bar would work too).
我想要第二个 div.bar （或者最后一个 div.bar 也可以）。
采纳答案by Stein G. Strindhaug
UPDATE: This answer was originally written in 2008 when nth-of-typesupport was unreliable at best. Today I'd say you could safely use something like .bar:nth-of-type(2), unless you have to support IE8 and older.
更新：这个答案最初是在 2008 年编写的，当时nth-of-type支持充其量是不可靠的。今天我想说你可以安全地使用类似的东西.bar:nth-of-type(2)，除非你必须支持 IE8 和更旧的版本。
Original answer from 2008 follows (Note that I would not recommend this anymore!):
2008 年的原始答案如下（请注意，我不会再推荐这个了！）：
If you can use Prototype JSyou can use this code to set some style values, or add another classname:
如果您可以使用Prototype JS，您可以使用此代码设置一些样式值，或添加另一个类名：
// set style:
$$('div.theclassname')[1].setStyle({ backgroundColor: '#900', fontSize: '1.2em' });
// OR add class name:
$$('div.theclassname')[1].addClassName('secondclass'); // pun intentded...
(I didn't test this code, and it doesn't check if there actually is a second div present, but something like this should work.)
（我没有测试这段代码，它不会检查是否确实存在第二个 div，但这样的事情应该可以工作。）
But if you're generating the html serverside you might just as well add an extra class on the second item...
但是，如果您正在生成 html 服务器端，您也可以在第二个项目上添加一个额外的类...
回答by geocar
Selectors can be combined:
选择器可以组合：
.bar:nth-child(2)
means "thing that has class bar" that is also the 2nd child.
意思是“有类栏的东西”，也是第二个孩子。
回答by mhelvens
My original answer regarding :nth-of-typeis simply wrong. Thanks to Paul for pointing this out.
我原来的答案:nth-of-type是完全错误的。感谢保罗指出这一点。
The word "type" there refers only to the "element type" (like div). It turns out that the selectors div.bar:nth-of-type(2)and div:nth-of-type(2).barmean the same thing. Both select elements that [a] are the second divof their parent, and [b] have class bar.
那里的“类型”一词仅指“元素类型”（如div）。事实证明，选择器div.bar:nth-of-type(2)和div:nth-of-type(2).bar意思是一样的。都选择 [a] 是div其父元素的第二个元素，而 [b] 具有 class bar。
So the only pure CSS solution left that I'm aware of, if you want to select all elements of a certain selector except the first, is the general sibling selector:
因此，我所知道的唯一纯 CSS 解决方案是，如果您想选择某个选择器的所有元素，除了第一个，是通用兄弟选择器：
.bar ~ .bar
http://www.w3schools.com/cssref/sel_gen_sibling.asp
http://www.w3schools.com/cssref/sel_gen_sibling.asp
My original (wrong) answer follows:
我原来的（错误的）回答如下：
With the arrival of CSS3, there is another option. It may not have been available when the question was first asked:
随着 CSS3 的到来，还有另一种选择。首次提出问题时，它可能不可用：
.bar:nth-of-type(2)
http://www.w3schools.com/cssref/sel_nth-of-type.asp
http://www.w3schools.com/cssref/sel_nth-of-type.asp
This selects the second element that satisfies the .barselector.
这将选择满足.bar选择器的第二个元素。
If you want the second and lastof a specific kind of element (or all of them except the first), the general sibling selector would also work fine:
如果您想要特定类型元素的第二个和最后一个（或除第一个之外的所有元素），通用同级选择器也可以正常工作：
.bar ~ .bar
http://www.w3schools.com/cssref/sel_gen_sibling.asp
http://www.w3schools.com/cssref/sel_gen_sibling.asp
It's shorter. But of course, we don't like to duplicate code, right? :-)
它更短。但当然，我们不喜欢重复代码，对吧？:-)
回答by Seamus
What exactly is the structure of your HTML?
你的 HTML 的结构到底是什么？
The previous CSS will work if the HTML is as such:
如果 HTML 是这样的，以前的 CSS 将起作用：
CSS
CSS
.foo:nth-child(2)
HTML
HTML
<div>
<div class="foo"></div>
<div class="foo">Find me</div>
...
</div>
But if you have the following HTML it will not work.
但是，如果您有以下 HTML，它将不起作用。
<div>
<div class="other"></div>
<div class="foo"></div>
<div class="foo">Find me</div>
...
</div>
Simple put, there is no selector for the getting the index of the matches from the rest of the selector before it.
简单地说，没有选择器可以从它之前的选择器的其余部分获取匹配项的索引。
回答by Surya R Praveen
HTML
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
CSS
.bar {background:red;}
.bar~.bar {background:green;}
.bar~.bar~.bar {background:yellow;}
回答by Timon
And for people who are looking for a jQuery compatible answer:
对于正在寻找 jQuery 兼容答案的人：
$('.foo:eq(1)').css('color', 'red');
HTML:
HTML：
<div>
<div class="other"></div>
<div class="foo"></div>
<div class="foo">Find me</div>
...
回答by One Crayon
Is there a reason that you can't do this via Javascript? My advice would be to target the selectors with a universal rule (.foo) and then parse back over to get the last foo with Javascript and set any additional styling you'll need.
是否有理由不能通过 Javascript 执行此操作？我的建议是使用通用规则 ( .foo)定位选择器，然后重新解析以使用 Javascript 获取最后一个 foo 并设置您需要的任何其他样式。
Or as suggested by Stein, just add two classes if you can:
或者按照 Stein 的建议，如果可以，只需添加两个类：
<div class="foo"></div>
<div class="foo last"></div>
.foo {}
.foo.last {}
回答by Eric Hendrickson
.parent_class div:first-child + div
I just used the above to find the second divby chaining first-child with the +selector.
我只是使用上面的方法div通过将 first-child 与+选择器链接来找到第二个。
回答by Amirhossein Tarmast
First you must select the parent element and set :nth-of-type(n)for the parent and then select the element you want. something like this :
首先你必须选择父元素并设置为父元素:nth-of-type(n)，然后选择你想要的元素。像这样：
#topmenu li:nth-of-type(2) ul.childUl {
This will select the second submenu from topmenu. #topmenu liis the parent element.
这将从顶部菜单中选择第二个子菜单。#topmenu li是父元素。
HTML:
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>
