Bagaimanakah Saya Boleh Memilih Elemen Berdasarkan Keadaan Elemen Lain Menggunakan CSS?

Bagaimana untuk Memilih Elemen Berdasarkan Keadaan Elemen Lain dalam Halaman dengan CSS?

Pengenalan

CSS tidak menyediakan cara untuk memilih elemen berdasarkan keadaan elemen lain semata-mata. Walau bagaimanapun, dengan menggabungkan pemilih mudah, penggabung dan perhubungan induk antara elemen, adalah mungkin untuk mencapai penyasaran elemen silang terhad dalam senario tertentu.

Hubungan Struktur dan Pemilih Mudah

Pemilih CSS mewakili struktur dan keadaan elemen dalam pepohon dokumen. Pemilih mudah seperti pemilih jenis, pemilih atribut dan kelas pseudo mengenal pasti elemen individu berdasarkan sifatnya. Contohnya:

div[data-status~="finished"]

Penggabung dan Perhubungan

Penggabung, seperti >, , dan ~, mentakrifkan perhubungan antara unsur. Contohnya, > mewakili perhubungan anak, menandakan adik beradik bersebelahan, dan ~ memilih semua adik beradik. Oleh itu, kita boleh membina:

section > div[data-status~="finished"]

Batasan Pemilih Sedia Ada

Walaupun mempunyai penggabung anak dan adik beradik, Pemilih 3 tidak mempunyai pemilih songsang atau datuk nenek. Ini menjadikannya mustahil untuk memilih elemen secara langsung berdasarkan keadaan elemen yang tidak berkaitan, seperti dalam contoh:

<section>
    <div data-status="finished"></div>
    <section>
        <div>

Hierarki Elemen Pseudo dan Kelas Dinamik

Pandai penggunaan hierarki unsur pseudo dan manipulasi kelas dinamik kadangkala boleh menyediakan penyelesaian untuk penyasaran elemen silang. Walau bagaimanapun, teknik ini adalah terhad dan memerlukan kod yang ketara.

Potensi Penyelesaian dalam CSS4: :has()

Dalam lelaran CSS pada masa hadapan, seperti CSS4, : has() pseudo-class boleh digunakan untuk memilih elemen berdasarkan hubungannya dengan subpokok tertentu. Ini akan menyediakan cara untuk mengatasi had semasa:

section:has(> div[data-status~="finished"]) + section > div.blink

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memilih Elemen Berdasarkan Keadaan Elemen Lain Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!