Apakah Perbezaan Antara `.foo.bar` dan `.foo .bar` dalam Sintaks Kelas CSS?

Sintaks Kelas CSS: .foo.bar vs .foo .bar

Dalam CSS, sintaks untuk menambah kelas pada elemen boleh berbeza-beza, yang membawa kepada kekeliruan tentang tujuannya penggunaan. Soalan ini menangani perbezaan antara dua sintaks kelas berikut:

.elemen .symbol vs .element.large .symbol

Penjelasan

1. .elemen .symbol: Sintaks ini bermakna kelas .symbol digunakan pada elemen yang sudah mempunyai .kelas unsur. Dalam erti kata lain, ia memilih unsur yang merupakan keturunan unsur dengan kelas .elemen.
2. .elemen.large .simbol: Sintaks ini berbeza. Di sini, kelas .large dilampirkan pada kelas .elemen. Ini bermakna kelas .symbol digunakan pada elemen yang mempunyai kedua-dua kelas .elemen dan .large.

Contoh

Untuk menggambarkan konsep ini, pertimbangkan HTML dan CSS berikut:

<div class="element">
  <div class="symbol"></div>
</div>

<div class="element large">
  <div class="symbol"></div>
</div>

.element .symbol {
  color: red;
}

.element.large .symbol {
  font-weight: bold;
}

Dalam contoh ini, div .symbol pertama di dalam div .element akan menjadi berwarna merah, manakala div .simbol kedua di dalam div besar .elemen akan diwarnakan merah dan tebal.

Kesimpulan

Perbezaan antara dua sintaks kelas terletak pada hubungan antara kelas ditentukan. .foo.bar memilih elemen yang mempunyai kelas bar dan turunan unsur dengan kelas foo, manakala .foo .bar memilih elemen yang mempunyai kedua-dua kelas foo dan bar.

Atas ialah kandungan terperinci Apakah Perbezaan Antara `.foo.bar` dan `.foo .bar` dalam Sintaks Kelas CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!