css 伪类选择器答案

【问题标题】：css pseudoclass selectorcss 伪类选择器
【发布时间】：2013-03-29 05:59:39
【问题描述】：

我想使用 :nth-child 在我的 css 标记中选择第二个 div，但我无法让它工作。

我有这个由插件生成的标记：

<div class="single-container">
                <div class="toggle-default">
                    <div class="toggle">
                    <div class="toggle_title toggle_active">FIRST</div>
                    <div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>

                    </div>

    <div class="toggle-default">
                    <div class="toggle">
                    <div class="toggle_title toggle_active">SECOND </div>
                    <div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>

                    </div>



    <div class="toggle-default">
                    <div class="toggle">
                    <div class="toggle_title toggle_active">THIRD </div>
                    <div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>

                    </div>


    </div>

我试过这个：.toggle-deafult .toggle:nth-child(2) { background:red; } 和这个.toggle div:nth-child(2)，但它不起作用。

有人可以帮我解决这个问题吗？

谢谢！

后期编辑：我已经修改了标记，这是我需要修改的：<div class="toggle_title toggle_active">SECOND </div>

【问题讨论】：

如果您希望第二个.toggle-default 为红色，请使用.toggle-default:nth-child(2) { background:red; }。注意：您在问题中拼写错误 default。
你的意思是.toggle-default .toggle :nth-child(2)（注意空格和默认错字）？我不清楚你想要哪个颜色。使用空格，您将定位 div.toggle 的第二个孩子。
你想要哪个 "second div" 为红色。 .toggle-default 内的第二个 .toggle-default 或第二个 div？
“我的标记中的第二个 div”到底是什么意思？你在Depth-first 还是Breadth-first？
我已经修改了标记，希望现在很清楚，也尝试了您的建议，但仍然无效。

标签： css pseudo-class css-selectors

【解决方案1】：

.toggle-default:nth-child(2) .toggle_title{ background:#f00;}

这是您要修改的第二个。

【讨论】：

【解决方案2】：

你需要.toggle-default:nth-of-type(2n) { color: red; }（注意2n）。

【讨论】：

【解决方案3】：

.toggle-default:nth-child(2) {
    background-color: red;
}

【讨论】：

我已经用我需要修改的确切 div 更新了我的标记