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

选择器可以组合:

.bar:nth-child(2)

意思是“有阶级的东西” 酒吧 “这也是第二个孩子。

我最初的回答是关于 :nth-of-type 这完全是错误的。感谢保罗指出这一点。

“类型”一词仅指“元素类型”(如 div ).事实证明,选择器 div.bar:nth-of-type(2) 和 div:nth-of-type(2).bar 意思是一样的。这两个元素都选择[a]作为第二个元素 分区 他们的父母,并且[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

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

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

超文本标记语言

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

HTML的具体结构是什么?

如果HTML是这样的,则前面的CSS将工作:

CSS格式

.foo:nth-child(2)

超文本标记语言

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

简单地说,没有选择器可以从之前的选择器的其余部分获取匹配的索引。

对于那些正在寻找与jQuery兼容的答案的人:

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

HTML:

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

.parent_class div:first-child + div

我只是用上面的来找到第二个 div 通过将第一个孩子与 + 选择器。

你不能通过Javascript做到这一点有什么原因吗?我的建议是用一条通用规则来针对选择者( .foo )然后用Javascript重新解析以获取最后一个foo,并设置所需的任何其他样式。

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

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

.foo {}
.foo.last {}

首先,您必须选择父元素并设置 :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>