Kelas pseudo CSS :: tidak () dan: sasaran

Artikel ini meneroka kelas pseudo CSS yang serba boleh :not() dan :target, mempamerkan kuasa mereka dalam mewujudkan gaya yang canggih dan disasarkan. Kami akan menyelidiki fungsi mereka dan menunjukkan aplikasi praktikal, termasuk membina tab bebas JavaScript.

Konsep Utama:

Pseudo-Class bertindak sebagai penapis, memilih semua elemen
• kecuali :not() yang sepadan dengan pemilih yang diberikan. Ini membolehkan pengecualian elemen tepat dari peraturan gaya. Kelas Pseudo
menyoroti bahagian dokumen yang sepadan dengan serpihan URL tertentu (bahagian selepas simbol
• ). Ini membolehkan mewujudkan elemen interaktif tanpa JavaScript. :target #

tab JavaScript-less dengan

: :target Dengan pandai memanipulasi serpihan URL dan kelas pseudo

, kita boleh membina antara muka yang berfungsi tanpa bergantung kepada JavaScript. Mengklik tab mengemas kini serpihan URL, mencetuskan gaya

pada kandungan tab yang sepadan, menjadikannya lapisan yang kelihatan. :target :target

tidak termasuk elemen dengan

: :not() Kuasa

terletak pada keupayaannya untuk mengecualikan unsur -unsur dari peraturan gaya. Walau bagaimanapun, batasan semasa menerima hanya satu hujah memerlukan Chaining untuk pelbagai pengecualian. Sebagai contoh,

memilih semua elemen input kecuali butang radio, kotak semak, dan input pelbagai. Spesifikasi CSS masa depan menjanjikan fungsi yang lebih baik, yang membolehkan hujah-hujah yang dipisahkan koma dalam :not(). input:not([type=radio]):not([type=checkbox]):not([type=range]) :not()

Petikan daripada "CSS Master" oleh Tiffany B. Brown. Terdapat di kedai buku dan sebagai ebook.

Bahagian ini meneroka kelas pseudo lanjutan, termasuk kelas pseudo yang diindeks dan ditaip kanak-kanak (memilih unsur-unsur mengikut kedudukan dalam pokok dokumen) dan input kelas pseudo (mensasarkan medan borang berdasarkan nilai dan negeri mereka).

menyoroti serpihan halaman:

Pengenalpastian fragmen (mis., ,

) digunakan untuk navigasi dalam halaman. Kelas pseudo

membolehkan kita gaya bahagian yang sepadan dengan pengecam serpihan semasa tanpa JavaScript. Contohnya: #top #footnote1 gaya ini mengulas dengan latar belakang kuning apabila ID mereka sepadan dengan serpihan URL. :target

.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}

Mencipta tab CSS-Only: Pseudo-Class

adalah kunci untuk membuat tab bebas JavaScript. Dengan menetapkan nilai

berdasarkan keadaan :target, kami memastikan bahawa hanya tab yang dipilih dapat dilihat. z-index :target

.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}

<div class="tabbed-widget">
  <div class="tab-wrap">
    <a href="https://www.php.cn/link/7426f79c9a7f5af0a6cc457b2a7fb195">Tab 1</a>
    <a href="https://www.php.cn/link/60430f4a984aa0a534e027339a7580a7">Tab 2</a>
    <a href="https://www.php.cn/link/9d4f684ba088d28ad1c2ae7d0aee496a">Tab 3</a>
  </div>
  <ul class="tab-body">
    <li id="tab1"><p>This is tab 1.</p></li>
    <li id="tab2"><p>This is tab 2.</p></li>
    <li id="tab3"><p>This is tab 3.</p></li>
  </ul>
</div>

Petua Kebolehcapaian:

Untuk kebolehcapaian yang lebih baik, pertimbangkan untuk menggunakan JavaScript untuk mengurus atribut

. aria-hidden

dalam tindakan:

:not() kelas pseudo ditunjukkan oleh label bentuk gaya, tidak termasuk mereka yang mempunyai kelas

.

:not() label-radio

[id^=tab] { position: absolute; }
[id^=tab]:first-child { z-index: 1; }
[id^=tab]:target { z-index: 2; }

Chaining

sangat penting apabila tidak termasuk pelbagai jenis elemen, seperti yang ditunjukkan di bawah:

ini mensasarkan semua jenis input :not() kecuali

radio, kotak semak, dan julat.

label:not(.label-radio) {
  font-weight: bold;
  display: block;
}

FAQS ON pemilih:

Bahagian ini memberikan jawapan kepada soalan umum mengenai pemilih :not(), meliputi fungsi, sokongan penyemak imbas, dan penggunaan dengan pelbagai pemilih CSS. Jawapannya sama dengan yang ada dalam teks asal, tetapi diubahsuai untuk kejelasan dan kesimpulan.

Atas ialah kandungan terperinci Kelas pseudo CSS :: tidak () dan: sasaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!