Wie formatiere ich selektiv bestimmte CSS-Rasterzellen, ohne „nth-child' zu verwenden?

So zielen Sie auf bestimmte Rasterzellen in CSS ab

Auswählen von Zeilen und Spalten ohne untergeordnete Rasterfelder

In einem CSS-Rasterlayout tun dies Selektoren für das n-te untergeordnete Element Es reicht nicht aus, bestimmte Zellen auszuwählen, da der Inhalt dynamisch innerhalb der Zellen platziert werden kann. Sie können jedoch ein Wrapper-Element mit display:-Inhalten verwenden, um das gewünschte Verhalten zu erzielen.

Stellen Sie sich das folgende Szenario vor:

body {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.grid-item {
  background: #999;
}

Um alle Elemente in der zweiten Spalte auszuwählen, schließen Sie sie ein ein Wrapper mit display:content. Dadurch können Sie die Zellen in der zweiten Spalte gemeinsam formatieren.

body {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.grid-container {
  display: contents;
  grid-column: 2;
}

.grid-item {
  background: #999;
}

Dieser Ansatz stellt sicher, dass sich die umschlossenen Elemente so verhalten, als wären sie direkte untergeordnete Elemente des Rastercontainers, sodass Sie Stile entsprechend anwenden können.

Das obige ist der detaillierte Inhalt vonWie formatiere ich selektiv bestimmte CSS-Rasterzellen, ohne „nth-child' zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!