html - 如何在这里正确实现第 nth-of-type？

Question

<div id="Main">
    <div id="sub">
        <section id="sub2">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </section> 
    </div>
</div>

当我尝试 "div:nth-of-type(1)before{content: "Foo: ";}"时，Foo 正在所有 div 上输出。我明白为什么会这样。有没有办法解决这个问题并且只输出部分下的 div？

编辑:我无法完成第 n 个部分，因为我遇到了同样的问题。还有其他地方我也有 section 元素。

Answer 1

sub2 应该是唯一的，所以:

#sub2 div:first-child::before{content: "Foo: ";}