Bagaimanakah Saya Boleh Memilih Elemen Tanpa Kelas atau Atribut Tertentu dalam CSS?-tutorial css-php.cn

Bagaimanakah Saya Boleh Memilih Elemen Tanpa Kelas atau Atribut Tertentu dalam CSS?

Patricia Arquette

Lepaskan： 2024-12-17 21:55:16

asal

331 orang telah melayarinya

How Can I Select Elements Without Specific Classes or Attributes in CSS?

Menegaskan Pemilih Kelas dan Atribut dalam CSS

Perlu memilih elemen yang kekurangan kelas atau atribut tertentu? CSS menawarkan penyelesaian melalui :not() pseudo-class.

:not() Pseudo-Class

:not() pseudo-class membenarkan anda untuk menafikan pemilih, memilih elemen yang tidak sepadan dengan kriteria yang ditentukan. Biasanya, pemilih kelas digunakan seperti berikut:

:not(.printable) {
    /* Styles for non-printable elements */
}

Salin selepas log masuk

Begitu juga, pemilih atribut boleh dinafikan:

:not([attribute]) {
    /* Styles for elements without the attribute */
}

Salin selepas log masuk

Contoh

Pertimbangkan HTML berikut:

<html>

Salin selepas log masuk

Untuk memilih semua elemen yang tidak mempunyai kelas "boleh dicetak", gunakan peraturan CSS berikut:

:not(.printable) {
    background-color: lightgray;
}

Salin selepas log masuk

Ini akan menyerlahkan nav dan elemen dalam kelabu muda.

Sokongan dan Alternatif Penyemak Imbas

IE8 dan lebih lama tidak menyokong :not(). Sebagai alternatif, anda boleh membuat peraturan gaya untuk elemen yang mempunyai kelas "boleh dicetak". Jika ini tidak dapat dilaksanakan, pertimbangkan untuk menstruktur semula penanda anda untuk menampung pengehadan.

Pertimbangan

Sifat seperti paparan: none on :not(.printable) akan mengalih keluar sepenuhnya elemen dan keturunannya daripada susun atur. Untuk mengelakkan perkara ini, gunakan keterlihatan: tersembunyi sebaliknya, yang membenarkan keturunan yang boleh dilihat ditunjukkan sementara elemen tersembunyi terus mempengaruhi reka letak.

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