CSS tidak boleh secara langsung memilih elemen induk, tetapi kesan sasaran dapat dicapai secara tidak langsung dengan pemilih khusus melalui pemahaman struktur. 1. Gunakan: mempunyai () kelas pseudo (eksperimen) untuk memilih elemen induk mengikut sama ada unsur kanak-kanak wujud, seperti .container: mempunyai (.special); 2. Secara manual menambah nama kelas tertentu ke elemen induk untuk mencapai kawalan gaya; 3. Gunakan JavaScript untuk menilai secara dinamik dan menambah nama kelas untuk bertindak balas terhadap perubahan dalam keadaan elemen kanak -kanak.

Apabila anda ingin memilih elemen induk melalui pemilih CSS, anda sebenarnya akan menghadapi batasan: CSS tidak menyokong secara langsung memilih "elemen induk" . Iaitu, anda tidak dapat mencari elemen induk secara terbalik dari elemen kanak -kanak seperti anda akan menulis JavaScript.

Tetapi anda secara tidak langsung boleh mencapai kesan sasaran dengan memahami struktur, menggunakan kombinasi pemilih tertentu, atau mencapai matlamat yang sama dalam senario tertentu.

Fahami bahawa tidak ada "pemilih induk" dalam CSS

Dalam spesifikasi CSS semasa (sehingga 2024), tidak ada sintaks bagi anda untuk membalikkan elemen induk dari elemen kanak -kanak. Sebagai contoh, anda ingin menulis ini:

 . anak: ibu bapa {
  /* Saya harap gaya berfungsi pada ibu bapa*/
}

Ini tidak sah. Oleh itu, jika keperluan anda untuk mengubah gaya elemen induk berdasarkan keadaan elemen kanak -kanak, anda perlu menggunakan struktur dan reka bentuk gaya HTML JavaScript atau Rethink.

Secara tidak langsung memanipulasi "elemen induk" menggunakan hubungan struktur

Walaupun anda tidak dapat secara langsung memilih elemen induk, anda boleh menggunakan pemilih lain untuk mencapai beberapa "kebolehkerjaan" visual melalui struktur ibu bapa dan anak yang diketahui.

Struktur Contoh:

 <div class = "container">
  <p> saya perenggan </p>
</div>

Jika anda ingin mempengaruhi .container berdasarkan kewujudan atau keadaan p , ini tidak dapat dilakukan dalam CSS tulen. Tetapi anda boleh melakukan ini:

• Tambahkan nama kelas tertentu ke bekas terlebih dahulu
• Menggunakan struktur hierarki gabungan kelas pseudo

Sebagai contoh, jika anda mahu elemen induk mempunyai gaya yang berbeza apabila elemen kanak -kanak tertentu muncul, anda boleh menambah nama kelas tambahan ke HTML:

 <div class = "container has-special-child">
  <p class = "Special"> Kandungan Khas </p>
</div>

Kemudian dalam CSS:

 .Container.has-special-child {
  Sempadan: 1px merah pepejal;
}

Kaedah ini tidak automatik, tetapi boleh dikawal secara manual.

Penggunaan :has() kelas pseudo (eksperimen)

Standard CSS terkini memperkenalkan pemilih yang sangat berguna tetapi eksperimen - :has() , yang membolehkan anda memilih elemen induk berdasarkan sama ada elemen kanak -kanak wujud.

Contohnya:

 .container: mempunyai (.special) {
  latar belakang warna: kuning;
}

Kod di atas bermaksud: "Jika .container mengandungi elemen kanak -kanak .special , gunakan latar belakang kuning."

?? Nota :: :has() tidak disokong sepenuhnya dalam pelayar arus perdana pada masa ini (seperti Chrome sudah menyokongnya, sokongan Firefox dan Safari terlambat). Keserasian harus dinilai dengan teliti apabila digunakan dalam persekitaran pengeluaran.

Cadangan dalam Pembangunan Sebenar

Dalam projek sebenar, jika anda perlu mengubah suai gaya elemen induk mengikut keadaan elemen kanak -kanak, amalan berikut disyorkan:

• ? Tambahkan nama kelas tambahan ke elemen induk di HTML (paling stabil)
• ? Gunakan JavaScript untuk menilai secara dinamik dan menambah nama kelas (sesuai untuk kandungan dinamik)
• ? Sekiranya ia hanya perubahan gaya visual, pertimbangkan sama ada ia boleh dikawal oleh elemen kanak -kanak itu sendiri (seperti menggunakan margin atau padding untuk mensimulasikan kesan induk)

Sebagai contoh, gunakan JS untuk menambah nama kelas secara dinamik:

 document.QuerySelectorAll ('. Special'). Foreach (el => {
  el.parentElement.classlist.add ('has-special');
});

Kemudian tentukannya dalam CSS:

 .has-khusus {
  Sempadan: 2px Blue Dashed Blue;
}

Pada dasarnya itu sahaja. Walaupun CSS tidak dapat secara langsung memilih elemen induk, kita masih dapat mencari alternatif yang sesuai melalui pemahaman struktur dan teknologi moden.

Atas ialah kandungan terperinci Bagaimana untuk memilih elemen induk menggunakan pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!