Saya memiliki beberapa HTML yang akan memiliki elemen dengan banyak kelas, dan saya perlu menetapkannya dalam satu aturan, sehingga kelas yang sama dapat berbeda dalam wadah yang berbeda. Katakanlah saya memiliki ini di CSS saya:
.border-blue {
border: 1px solid blue;
}
.background {
background: url(bg.gif);
}
Lalu saya memiliki ini di HTML saya:
<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>
Dapatkah saya menargetkan ini dalam satu aturan? Seperti ini, misalnya, yang saya tahu tidak berfungsi:
.border-blue, .background {
border: 1px solid blue;
background: url(bg.gif);
}
.border-blue .background { ... }
anak itu? saya mencoba ini dan ini tidak berhasilUntuk berjaga-jaga jika seseorang tersandung pada ini seperti yang saya lakukan dan tidak menyadarinya, dua variasi di atas untuk kasus penggunaan yang berbeda.
Pengikut:
adalah untuk saat Anda ingin menambahkan gaya ke elemen yang memiliki batas biru atau kelas latar belakang, misalnya:
semua akan mendapatkan bingkai biru dan latar belakang putih diterapkan pada mereka.
Namun, jawaban yang diterima berbeda.
Ini menerapkan gaya ke elemen yang memiliki kedua kelas jadi dalam contoh ini hanya kelas
<div>
dengan kedua kelas yang harus menerapkan gaya (di browser yang menafsirkan CSS dengan benar):Jadi pada dasarnya anggap saja seperti ini, pemisah koma berlaku untuk elemen dengan satu kelas ATAU kelas lain dan pemisah titik berlaku untuk elemen dengan satu kelas DAN kelas lain .
sumber
.blue-border.background
think of it as AND and OR
: Saran yang bagus. Saya dapat menambahkan bahwa itu.x .y
dapat dianggap sebagaiy && ancestors.has(x)