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

Question

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

但是，当我尝试使用它时，我发现发生了一些奇怪的事情。

这是我的 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>

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

然后我发现第二个按钮本身不能单独定位。我的 CSS 选择器针对所有按钮，就好像它们是 page-projects 子div下的第一类button元素一样。

我做错了吗？

Answer 1

我做了一个JSFiddle来解释它：在这里看到它

.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 元素。