CSS选择器仅选择第一个元素，而不是第一个和第二个

Question

我有一个简单的网格，里面有一些网格项。这些网格项中的2个具有.line类。

我正在尝试使用nth-of-type选择这些行中的每行，但是我能够选择两者的唯一方法是确保第二个.line元素位于{{1 }}元素。

似乎无法找出原因？

请参阅下面的代码进行比较。

.tagline

这是CSS：

<div className='container'>
    <img src={Logo} alt="" className="logo" />
    <div className="line" />
    <div className="tagline">
        I design & develop <span>websites.</span>
    </div>
    <img src={Polygon} alt="" className="polygon" />
    <a href="#" className="projects">
        Projects
    </a>
    <a href="#" className="about">
        About
    </a>
    // if this line element is below .tagline, it doesn't work try moving it up above .tagline and it works fine and the css selector is applied
    <div className="line" />
    <a href="#" className="contact">
        Contact
    </a>
</div>