Bolehkah CSS Memilih Elemen Tanpa Kelas atau Atribut Tertentu?-tutorial css-php.cn

Bolehkah CSS Memilih Elemen Tanpa Kelas atau Atribut Tertentu?

Susan Sarandon

Lepaskan： 2025-01-03 22:04:43

asal

872 orang telah melayarinya

Can CSS Select Elements Without a Specific Class or Attribute?

Bolehkah Seseorang Menulis CSS untuk Memilih Elemen Tanpa Kelas atau Atribut?

Isu ini timbul apabila seseorang ingin memilih elemen yang tidak mempunyai kelas atau atribut tertentu. Sebagai contoh, pertimbangkan HTML di bawah:

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>

Salin selepas log masuk

Dalam kes ini, kami bertujuan untuk memilih elemen tanpa kelas "boleh dicetak", iaitu nav dan a elemen.

Penyelesaian:

Secara tradisinya, satu boleh mencapai ini dengan :not() pseudo-class yang digunakan pada pemilih kelas:

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

Salin selepas log masuk

Walau bagaimanapun, untuk keserasian penyemak imbas yang dipertingkatkan (IE8 dan ke bawah kekurangan :not() sokongan), adalah disyorkan untuk menggayakan elemen yang ada mempunyai kelas "boleh dicetak". Jika ini tidak praktikal, pengubahsuaian penanda mungkin diperlukan.

Pertimbangan:

Sifat yang ditetapkan dalam peraturan ini mungkin menjejaskan keturunan dengan kelas "boleh dicetak". Sebagai contoh, tetapan paparan: none on :not(.printable) akan menyembunyikan kedua-dua ia dan keturunannya. Sebaliknya, pertimbangkan untuk menggunakan keterlihatan: tersembunyi untuk membolehkan keturunan dipaparkan sambil mengekalkan reka letak asal. Oleh itu berhati-hati dinasihatkan.

Atas ialah kandungan terperinci Bolehkah CSS Memilih Elemen Tanpa Kelas atau Atribut Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!