Lebih banyak kegunaan dunia nyata untuk: mempunyai ()

Pseudo-Class CSS adalah salah satu ciri baru CSS kegemaran saya, dan saya percaya banyak peserta dalam kaji selidik CSS bersetuju dengan ini. Keupayaan untuk "membalikkan" pemilih memberikan kita keupayaan yang tidak disangka -sangka.

:has() Sebab mengapa ia dipanggil "lebih kuat" adalah kerana banyak pemaju pintar telah menerbitkan banyak idea pintar yang menakjubkan, seperti:

Jen Simmons '"Penggunaan: mempunyai () sebagai pemilih ibu bapa CSS dan banyak lagi"

• Bramus '"Melaksanakan sejumlah pertanyaan untuk" Kepulauan Element "dengan kelas yang sama" menggunakan CSS: mempunyai ()
• Bramus '"Menetapkan Gaya Elemen Ibu Bapa Berdasarkan Bilangan Kanak -kanak"
• Manuel Matuzović "Menggunakan Combinator In: Has ()"
• Austin Gil "Empat Cara untuk Membentuk HTML Anda Bentuk Cemerlang"
• Zoran Jambor's "Video :: mempunyai () kes praktikal"
• jhey tompkins's ": has (): pemilih keluarga"
Artikel ini bukan panduan yang berwibawa untuk

, dan juga tidak merupakan duplikasi kandungan yang ada. Saya hanya ingin berkongsi beberapa cara yang saya mungkin gunakan

dalam kerja harian saya ... Sudah tentu, premisnya adalah bahawa sokongan penyemak imbas cukup baik. (Firefox adalah penyemak imbas terakhir untuk bertahan, tetapi ia akan disokong tidak lama lagi.) :has() :has() Apabila sokongan penyemak imbas sempurna, saya pasti akan menggunakannya di mana -mana

. Berikut adalah beberapa kes sebenar yang saya bina baru -baru ini, dan saya fikir sendiri, "Betapa mudahnya ini akan menjadi

disokong sepenuhnya!" :has() Elakkan beroperasi di luar komponen JavaScript :has()

Adakah anda pernah membina komponen interaktif yang kadang -kadang perlu mempengaruhi gaya halaman di tempat lain? Dalam contoh berikut,

adalah menu mega, membuka ia mengubah warna kandungan di atas.

<nav></nav> Saya rasa saya selalu perlu melakukan perkara seperti ini.

Contoh khusus ini adalah komponen React yang saya buat untuk laman web. Saya terpaksa menggunakan

di luar bahagian React halaman "sentuh" ​​dan togol kelas pada

,

, atau komponen lain. Ini bukan akhir dunia, tetapi ia berasa sedikit janggal. Walaupun dalam laman web React Complete (seperti laman web Next.js), saya terpaksa memilih antara menguruskan keadaan document.querySelector(...) pada pokok komponen yang lebih tinggi atau melakukan pemilihan elemen DOM yang sama - yang tidak cukup reaksi. Dengan <header></header>, masalahnya diselesaikan: <main></main> menuIsOpen :has() Komponen JavaScript saya tidak lagi perlu berurusan dengan bahagian lain DOM!

header:has(.megamenu--open) {
  /* 如果包含具有类“.megamenu--open”的元素，则以不同的方式设置 header 样式 */
}

Pengalaman Pengguna Jadual Jadual Lebih Baik

Menambah baris berganti "jalur" ke meja boleh meningkatkan pengalaman pengguna. Mereka membantu mata anda menjejaki baris yang sedang anda lakukan ketika mengimbas meja.

Tetapi dalam pengalaman saya, ini tidak berfungsi dengan baik di atas meja dengan hanya dua atau tiga baris. Sebagai contoh, jika jadual anda mempunyai tiga baris dalam <tbody> dan anda "jalur" setiap "walaupun" baris, anda mungkin berakhir dengan hanya satu jalur. Ini tidak layak untuk corak ini dan boleh membuat pengguna tertanya -tanya apa yang istimewa tentang garis yang diserlahkan. Menggunakan Bramus menggunakan teknik menggunakan gaya berdasarkan bilangan elemen kanak -kanak, kita boleh menggunakan jalur meja apabila terdapat lebih daripada tiga baris: <code>:has() mahukan ciri -ciri yang lebih canggih? Anda juga boleh memutuskan untuk melakukan ini hanya jika jadual mempunyai sekurang -kurangnya beberapa lajur tertentu:

header:has(.megamenu--open) {
  /* 如果包含具有类“.megamenu--open”的元素，则以不同的方式设置 header 样式 */
}

Keluarkan logik kelas bersyarat dari templat

Saya sering perlu menukar susun atur halaman berdasarkan apa yang ada di halaman. Mengambil susun atur grid berikut sebagai contoh, lokasi kandungan utama akan mengubah kawasan grid mengikut sama ada sidebar wujud.

Ini mungkin bergantung kepada sama ada halaman saudara ditetapkan dalam CMS. Saya biasanya menggunakan logik templat untuk menambahkan kelas pengubah BEM ke pembalut susun atur agar sesuai dengan kedua -dua susun atur. CSS mungkin kelihatan seperti ini (peraturan responsif dan kandungan lain yang ditinggalkan untuk keringkasan):

table:has(:is(td, th):nth-child(3)) {
  /* 只有在有三列或更多列时才执行操作 */
}

Sudah tentu, dari perspektif CSS, ini benar -benar baik. Tetapi ini menjadikan kod templat sedikit kemas. Bergantung pada bahasa templat anda, menambah sekumpulan kelas yang boleh menjadi sangat hodoh, terutama jika anda perlu melakukan perkara yang sama dengan banyak elemen kanak -kanak.

Bandingkan ini dengan kaedah berdasarkan

: :has()

/* m = 主要内容 */
/* s = 侧边栏 */
.standard-page--with-sidebar {
  grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page--without-sidebar {
  grid-template-areas: '. m m m m m m m m m . .';
}

jujur, dari perspektif CSS, ini tidak lebih baik. Tetapi pada pendapat saya, mengeluarkan kelas pengubah bersyarat dari templat HTML adalah keuntungan yang baik.

Mudah untuk memikirkan keputusan reka bentuk mikro

- apabila imej dimasukkan ke dalam kad, sebagai contoh - tetapi saya fikir ia juga sangat berguna untuk perubahan susun atur makro ini. :has()

Pengurusan khusus yang lebih baik

Jika anda membaca artikel saya yang terdahulu, anda akan tahu bahawa saya berterusan dalam kekhususan. Jika anda seperti saya dan tidak mahu skor tertentu lonjakan apabila menambah

dan :has() ke seluruh gaya, pastikan anda menggunakan :not(). :where()

Ini adalah kerana kekhususan

adalah berdasarkan elemen yang paling spesifik :has() dalam senarai parameternya. Jadi jika anda memasukkan sesuatu seperti ID di dalamnya (saya tidak tahu mengapa!) Pemilih anda akan sukar untuk menimpa dalam lata. Sebaliknya, kekhususan sentiasa sifar dan tidak akan meningkatkan skor kekhususan.

:where() masa depan yang cerah

/* m = 主要内容 */
/* s = 侧边栏 */
.standard-page:has(.sidebar) {
  grid-template-areas: 's s s m m m m m m m m m';
}
.standard-page:not(:has(.sidebar)) {
  grid-template-areas: '. m m m m m m m m m . .';
}

Ini hanya beberapa ciri yang saya tidak sabar untuk digunakan dalam persekitaran pengeluaran. CSS-Tricks Almanac juga menyediakan beberapa contoh. Apa yang anda nantikan untuk menggunakan

? Apa kes sebenar yang anda hadapi yang akan menjadi penyelesaian yang sempurna?

Atas ialah kandungan terperinci Lebih banyak kegunaan dunia nyata untuk: mempunyai (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!