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

StackOverflow https://stackoverflow.com/questions/306062

  •  08-07-2019
  •  | 
  •  

题

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

我的HTML看起来像这样：

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

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

有帮助吗？

解决方案

更新：这个答案最初写于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服务器端，你也可以在第二个项目上添加一个额外的类......

其他提示

选择器可以合并：

.bar:nth-child(2)

表示<！>带有类 bar <！>的东西那也是第二个孩子。

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

单词<！> quot; type <！> quot;仅指<！>“元素类型<！>”; （比如div）。事实证明，选择器div.bar:nth-of-type(2)和div:nth-of-type(2).bar意味着相同的事情。两个选择元素[a]是其父元素的第二个bar，[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

这将选择满足<=>选择器的第二个元素。

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

<*>

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

它更短。但是，当然，我们不喜欢重复代码，对吗？ ： - ）

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>

简单来说，没有选择器可以从匹配器的其余部分获取匹配的索引。

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

对于那些正在寻找兼容jQuery的人来说：

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

HTML：

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

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

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

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

.foo {}
.foo.last {}

.parent_class div:first-child + div

我刚刚使用上面的内容通过使用div选择器链接第一个孩子来找到第二个+。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top