: tidak () - Trik CSS

Anonim

The :not()harta di CSS adalah kelas pseudo penafian dan menerima pemilih yang mudah atau senarai pemilih sebagai hujah. Ia sesuai dengan elemen yang tidak diwakili oleh argumen. Argumen yang diluluskan mungkin tidak mengandungi pemilih tambahan atau pemilih elemen pseudo.

Keupayaan untuk menggunakan senarai pemilih sebagai argumen dianggap eksperimen, walaupun disokongnya berkembang pada saat penulisan ini, termasuk Safari (sejak 2015), Firefox (sejak Disember 2020), dan Chrome (sejak Januari 2021).

/* the X argument can be replaced with any simple selectors */ :not(X) ( property: value; )

Dalam contoh ini kita mempunyai senarai yang tidak tersusun dengan kelas tunggal di

  • : 
    

      

    •

    CSS kami akan memilih semua

  • unsur kecuali satu dengan kelas .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Anda juga boleh melakukan perkara yang sama menggunakan kelas semu yang dianggap sebagai pemilih sederhana.

    p:not(:nth-child(2n+1)) ( font-size: 3em; )

    Tetapi jika kita menggunakan pemilih elemen semu sebagai hujah kita, ia tidak akan menghasilkan hasil yang diharapkan.

    :not(::first-line) ( /* ::first-line is a pseudo element selector and not a simple selector */ color: white; )

    Pemilih Kompleks

    /* select all

    s that are not descendants of */ p:not(article *) ( )

    Contoh Visual

    Perwakilan visual dari pelbagai kegunaan :not()

    Kekhususan

    Kekhususan daripada :not pseudo-kelas adalah kekhususan hujahnya. Kelas :not() pseudo tidak menambah kekhususan pemilih, tidak seperti kelas pseudo yang lain.

    Negasi tidak boleh bersarang sehingga :not(:not(… )) tidak pernah dibenarkan. Penulis juga harus memperhatikan bahawa kerana unsur-unsur pseudo tidak dianggap sebagai pemilih sederhana, elemen-elemen tersebut tidak sah sebagai hujah untuk :not(X). Berhati-hatilah semasa menggunakan pemilih atribut kerana beberapa tidak disokong secara meluas seperti yang lain. Merantai :not pemilih dengan pemilih lain :not dibenarkan.

    Sokongan penyemak imbas

    The :not()kelas pseudo telah dikemas kini dalam CSS Pemilih Level 4 spesifikasi untuk membenarkan senarai hujah. Dalam CSS Selectors Level 3, ia hanya mampu menerima satu pemilih sederhana. Hasilnya, sokongan penyemak imbas sedikit dibahagikan antara draf Tahap 3 dan Tahap 4.

    Pemilih sederhana

    IE Hujung Firefox Chrome Safari Opera
    9+ Semua Semua Semua 12.1+ Semua
    Android Chrome Android Firefox Penyemak Imbas Android Safari iOS Opera Mudah Alih
    Semua Semua Semua Semua Semua

    Senarai pemilih

    Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

    Desktop

    Chrome Firefox IE Hujung Safari
    88 84 Tidak 88 9

    Mudah Alih / Tablet

    Android Chrome Android Firefox Android Safari iOS
    88 85 81 9.0-9.2

    Maklumat lanjut

    • Modul Pemilih CSS Tahap 3
    • Spesifikasi CSS Selectors Level 4