Apakah Perbezaan Antara '.foo.bar' dan '.foo .bar' dalam Pemilih Kelas CSS?

Memahami Perbezaan dalam Sintaks Kelas CSS: '.foo.bar' vs '.foo .bar'

Dalam CSS, nama kelas digunakan untuk menggunakan penggayaan kepada elemen tertentu pada halaman web. Walau bagaimanapun, terdapat dua sintaks berbeza yang digunakan untuk mentakrifkan nama kelas: satu tanpa ruang dan satu dengan ruang.

Sintaks tanpa Ruang: .foo.bar

Sintaks .foo.bar merujuk kepada elemen yang memenuhi kedua-dua kelas .foo dan .bar. Dalam erti kata lain, ia memilih elemen yang mempunyai kedua-dua kelas .foo dan .bar digunakan pada mereka. Contohnya, jika anda mempunyai CSS berikut:

.foo {
  color: red;
}

.bar {
  background-color: blue;
}

Dan anda menggunakan kelas .foo.bar pada elemen, elemen itu akan mewarisi penggayaan daripada kedua-dua kelas .foo dan .bar. Ia akan mempunyai teks merah dan latar belakang biru.

Sintaks dengan Ruang: .foo .bar

Sebaliknya, sintaks .foo .bar memilih elemen yang mempunyai kelas .foo dan merupakan keturunan unsur yang mempunyai kelas .bar. Contohnya, dengan CSS berikut:

.foo {
  color: red;
}

.bar {
  background-color: blue;
}

Jika anda menggunakan kelas .foo .bar pada elemen, ia hanya memilih elemen dengan kelas .foo yang berada di dalam elemen dengan kelas .bar. Jadi, ia tidak akan memilih elemen dengan hanya kelas .foo atau elemen yang bersarang berbilang peringkat jauh dalam elemen .bar.

Kesimpulan

Memahami perbezaan antara ini dua sintaks CSS adalah penting untuk menggunakan penggayaan dengan tepat pada elemen pada halaman web. Sintaks tanpa ruang memilih elemen yang mempunyai berbilang kelas digunakan, manakala sintaks dengan ruang memilih elemen yang mempunyai kelas tertentu dalam konteks tertentu.

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