How can I style every other row of a CSS Grid? [duplicate]

问题

This question already has answers here:

How to target a specific column or row in CSS Grid Layout? (6 answers)

Closed 2 years ago.

I have an indefinite amount of div elements (pieces of content / grid items). I want them to layout in a defined number of columns of CSS Grid. The CSS Grid lays them out like that easily. But now as the elements are in place I'd like to style the <div>s in every other row of the resultant grid in some way.

Think of it as styling every other row of table to a darker color.

This question can be generalised to asking: can you style an arbitrary row/ column of a CSS Grid?

Proposed situation:

<div class="content-grid">
    <div class=""content-grid__item></div>
    <div class=""content-grid__item></div>
    <div class=""content-grid__item></div>
    ...

</div>

The css for it:

.content-grid {
    display: grid;
    grid-template-columns: 77px 77px 77px;
}

.content-grid__item {
    background-color: red;
}

And the preferable solution in of the ideal world:

// pseudocode
.content-grid:nth-row(odd) .content-grid__item {
    background-color: darkred;
}

回答1:

You can't...

CSS Grid rows are not DOM elements and so cannot be selected by CSS.

来源：https://stackoverflow.com/questions/46451271/how-can-i-style-every-other-row-of-a-css-grid