Bagaimana untuk Menggayakan Sel Grid CSS Khusus Secara Selektif Tanpa Menggunakan `anak-anak`?

Cara Menyasarkan Sel Grid Khusus dalam CSS

Memilih Baris dan Lajur Tanpa Anak Grid

Dalam susun atur grid CSS, pemilih anak ke-n melakukan tidak mencukupi untuk memilih sel tertentu kerana kandungannya boleh diletakkan secara dinamik di dalam sel. Walau bagaimanapun, anda boleh menggunakan elemen pembalut dengan paparan: kandungan untuk mendapatkan gelagat yang diingini.

Pertimbangkan senario berikut:

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

.grid-item {
  background: #999;
}

Untuk memilih semua elemen dalam lajur kedua, sertakan ia dalam pembungkus dengan paparan: kandungan. Ini membolehkan anda menggayakan sel dalam lajur kedua secara kolektif.

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;
}

Pendekatan ini memastikan elemen yang dibalut berkelakuan seolah-olah ia adalah anak langsung bekas grid, membolehkan anda menggunakan gaya dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Sel Grid CSS Khusus Secara Selektif Tanpa Menggunakan `anak-anak`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!