不确定如何在 CSS 网格中使用第 n 个选择器，因为每当我向其中添加一些内容时，它似乎都会更改所有元素

Question

正如标题所说。每当我使用 nth:child (1) 仅选择一个元素时，它似乎会选择所有元素，并且我对其应用的任何更改都会将其应用于所有元素。

.grid {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 100%;
}

.grid :nth-child(1){
    font-weight: bold;
}

.grid :nth-child(2){
    font-weight: normal;
}

任何帮助将不胜感激，因为我对 CSS 和 Flexbox 相当陌生。

我希望它只会影响第一个元素

Answer 1

.fred :first-child

此 CSS 选择器与具有

.fred

类的元素的任何后代相匹配，该类是其父级的第一个子级。

.fred>:first-child

此 CSS 选择器仅匹配类别为

.fred

的元素的第一个子元素。