css伪类选择器

Question

我想使用：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)，但它不起作用。

有人可以帮我吗？

谢谢！

LATER EDIT：我修改了标记，这是我需要修改的内容：<div class="toggle_title toggle_active">SECOND </div>

Answer 1

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

这是你要修改的第二个。

Answer 2

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

Answer 3

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