Bolehkah CSS Memilih Elemen Tanpa Kelas atau Atribut Tertentu?

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:

    
        <h1 id="Example">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>
    

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 */
}

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!