使用'：nth-​​of-type'一起选择所有子元素，而不是单独选择

Question

我习惯nth-of-type选择元素中的元素（拥有类）我将伪类放在上面。例如;据我所知，body div:nth-of-type(24)会选择我页面div中的第24个body。

然而，当我尝试利用它时，我发现了一些奇怪的事情。

这是我的HTML：

            <div class="page-projects">

            <p>Projects</p>
            <div>
                <a href="http://www.projects.crowes.co/biotechgames">
                    <button>
                        <img src="../assets/pro/cro-biotechlogo.png" />
                        <p>BioTech Games</p>
                    </button>
                </a>
                <a href="http://www.projects.crowes.co/moonsquads/preview/">
                    <button>
                        <img src="../assets/pro/cro-moonsquadslogo.png" />
                        <p>Moonsquads</p>
                    </button>
                </a>
            </div>
        </div>

如果我尝试定位第一个按钮（在a的{​​{1}}下），我应该使用http://www.projects.crowes.co/biotechgames，然后输入我喜欢的任何属性，比如.page-projects div:nth-of-type(1) button:nth-of-type(1) - - 这应该将border: 1px solid red的第一个边框更改为<button的{​​{1}}，而是更改该按钮和下一个按钮（1px下的solid red a）。

然后我发现第二个按钮本身无法单独定位。我的CSS选择器定位所有按钮，就好像它们是http://www.projects.crowes.co/moonsquads/preview/的子button下的第一种div元素。

我这样做错了吗？

Answer 1

我做了一个JSFiddle来解释它：see it here

.page-projects div:nth-of-type(1) a:nth-of-type(1) button {border: 1px solid red}

你必须让a:nth-of-type选择第一个标签，然后你可以选择它的第一个按钮，这是唯一一个。

否则，根据您的条件，它将选择有效条件的所有第一个<button>，因为.page-projects类中只有一个div元素。