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

我的HTML看起来像这样:

...
...
...
...

我想要第二个div.bar(或者最后一个div.bar也可以).

1> geocar..：

---

选择器可以组合:

.bar:nth-child(2)

意思是"有班级栏的东西"也是第二个孩子.

---

只是为了让其他人更清楚,这不会起作用,因为它不是第二个孩子,它只是匹配`.bar`选择器的第二个元素.所以在这种情况下,`.bar:nth-​​child(2)实际上会选择第一个`div.bar`元素,因为它是类"bar"和它的父元素的第二个子元素.

2> Stein G. Str..：

---

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

---

+斯坦：事实证明，`nth-of-type`并没有达到我们的预期。您的新答案和我的旧答案一样，都是错误的。有关详细信息，请参见下面我编辑的答案。

3> mhelvens..：

---

我原来的答案: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

它更短.但是,当然,我们不喜欢重复代码,对吗？:-)

4> 小智..：

---

HTML的结构究竟是什么？

如果HTML是这样的话,之前的CSS将起作用:

CSS

.foo:nth-child(2)

HTML

 

 
Find me
...

但是,如果您有以下HTML,它将无法正常工作.

 

 

 
Find me
 ...

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

5> Surya R Prav..：

---

的HTML

 Target Bar Elements 

Foo Element
Bar Element
Baz Element
Bar Second Element
Jar Element
Kar Element
Bar Third Element

的CSS

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

演示 https://jsfiddle.net/ssuryar/6ka13xve/

6> 小智..：

---

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

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

HTML:

  

  

  
Find me
  ...