Bagaimanakah CSS Nesting Merevolusikan Reka Bentuk CSS dan Meningkatkan Kebolehselenggaraan Kod?

Kelas CSS Bersarang: Satu Revolusi dalam Reka Bentuk CSS

Pada masa lalu, sarang CSS tidak dapat dilakukan, tetapi dengan pengenalan Modul CSS Nesting, ia kini menjadi realiti. Ini membolehkan anda menyusun peraturan dalam peraturan lain, mewujudkan pangkalan kod CSS yang lebih boleh diselenggara dan terurus.

Sintaks CSS Nesting

Sintaks CSS Nesting adalah mudah:

parent-class {
  & selector {
    declarations;
  }
}

Dalam sintaks ini, simbol & mewakili pemilih induk. Ia membolehkan anda menyasarkan pemilih anak dalam kelas induk.

Contoh CSS Nesting

Berikut ialah beberapa contoh cara anda boleh menggunakan CSS nesting:

/* Apply styles to all `<td>` elements within `.colortable` */
table.colortable {
  & td {
    text-align:center;
  }
}

/* Apply styles to the first `<td>` element and its adjacent sibling within `.colortable` */
table.colortable {
  & td:first-child, & td:first-child + td {
    border:1px solid black;
  }
}

/* Apply styles to all `<th>` elements within `.colortable` */
table.colortable {
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

/* Apply styles to `.bar` elements that are children of `.foo` */
.foo {
  color: red;
  & > .bar {
    color: blue;
  }
}

/* Apply styles to `.parent` elements that contain `.foo` elements */
.foo {
  color: red;
  & .parent & {
    color: blue;
  }
}

Sokongan Pelayar untuk CSS Nesting

CSS Nesting disokong dalam semua penyemak imbas utama, termasuk:

• Chrome
• Firefox
• Safari
• Edge
• iOS Safari

Dengan sarang CSS, anda boleh mencipta kod CSS yang lebih teratur dan boleh diselenggara yang lebih mudah dibaca dan faham.

Atas ialah kandungan terperinci Bagaimanakah CSS Nesting Merevolusikan Reka Bentuk CSS dan Meningkatkan Kebolehselenggaraan Kod?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!