Bagaimana CSS: adalah ,: di mana dan: mempunyai pemilih kelas pseudo berfungsi

Takeaways Key

• pemilih kelas pseudo CSS: adalah () ,: di mana (), dan: mempunyai () menyediakan cara baru untuk menargetkan elemen HTML. The: adalah () pemilih membolehkan gaya yang lebih efisien dari pelbagai elemen, mengurangkan keperluan untuk rentetan pemilih verbose. The: di mana () pemilih beroperasi sama dengan: adalah (), tetapi dengan kekhususan sifar, menjadikannya berguna untuk menggunakan gaya asas tanpa meningkatkan kekhususan. The: mempunyai () pemilih mensasarkan elemen yang mengandungi satu set orang lain, menyediakan cara yang lama ditunggu-tunggu untuk menargetkan unsur-unsur ibu bapa.
• : adalah () dan: di mana () pemilih kelas pseudo disokong dalam semua pelayar moden, tetapi tidak di Internet Explorer. The: mempunyai () pemilih lebih baru dengan sokongan terhad pada masa ini, tetapi dijangka tersedia secara meluas pada tahun 2023. Menggunakan pemilih ini dapat memudahkan sintaks CSS dan mengurangkan keperluan untuk preprocessors CSS.
kekhususan: adalah () dan: di mana () pemilih berbeza. The: adalah () pemilih mempunyai kekhususan yang sama seperti pemilih yang paling spesifik dalam argumennya, sementara: di mana () pemilih mempunyai kekhususan sifar. Ini boleh menjadi praktikal untuk CSS Reset, yang menggunakan garis dasar gaya apabila tiada gaya tertentu tersedia, yang membolehkan untuk mengatasi sebarang gaya reset CSS tanpa mengira kekhususan.
Pemilih CSS membolehkan anda memilih elemen mengikut jenis, atribut, atau lokasi dalam dokumen HTML. Tutorial ini menerangkan tiga pilihan baru -: adalah () ,: di mana (), dan: mempunyai (). Pemilih biasanya digunakan dalam stylesheets. Contoh berikut menempatkan semua unsur perenggan

dan mengubah berat fon menjadi berani:

Anda juga boleh menggunakan pemilih dalam JavaScript untuk mencari nod Dom:

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

document.QuerySelector () Mengembalikan elemen HTML yang sepadan pertama
document.QuerySelectorAll () Mengembalikan semua elemen HTML yang sepadan dalam nodelist seperti array
Pemilih kelas pseudo mensasarkan elemen HTML berdasarkan keadaan semasa mereka. Mungkin yang paling terkenal ialah: Hover, yang menggunakan gaya apabila kursor bergerak ke atas elemen, jadi ia digunakan untuk menyerlahkan pautan dan butang yang boleh diklik. Pilihan popular lain termasuk:

: Dikunjungi: Perlawanan yang dilawati pautan
: sasaran: Memadankan elemen yang disasarkan oleh url dokumen
: anak pertama: mensasarkan elemen anak pertama
: nth-anak: Memilih elemen kanak-kanak tertentu
: kosong: Memadankan elemen tanpa kandungan atau elemen kanak -kanak
: diperiksa: Memadankan kotak semak atau butang radio yang bertukar-toggled-on
: kosong: Gaya medan input kosong
: didayakan: Memadankan medan input yang diaktifkan
: dilumpuhkan: Memadankan medan input kurang upaya
: Diperlukan: Sasaran medan input yang diperlukan
: sah: Memadankan medan input yang sah
: tidak sah: Memadankan medan input tidak sah
: Bermain: Menargetkan elemen audio atau video yang bermain

Pelayar baru-baru ini menerima tiga lagi pemilih kelas pseudo ...

CSS: adalah pemilih kelas pseudo

nota: Ini pada asalnya ditentukan sebagai: perlawanan () dan: mana -mana (), tetapi: adalah () telah menjadi standard CSS. Anda sering perlu menggunakan gaya yang sama dengan lebih daripada satu elemen. Sebagai contoh,

teks perenggan berwarna hitam secara lalai, tetapi kelabu apabila ia muncul dalam

,

, atau :

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

Ini adalah contoh yang mudah, tetapi halaman yang lebih canggih akan membawa kepada rentetan pemilih yang lebih rumit dan verbose. Ralat sintaks dalam mana -mana pemilih boleh memecahkan gaya untuk semua elemen. Preprocessors CSS seperti SASS Permit Nesting (yang juga datang ke CSS asli):

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

Ini mewujudkan kod CSS yang sama, mengurangkan usaha menaip, dan boleh menghalang kesilapan. Tetapi:

• Sehingga Native Nesting tiba, anda memerlukan alat binaan CSS. Anda mungkin mahu menggunakan pilihan seperti SASS, tetapi itu boleh memperkenalkan komplikasi untuk beberapa pasukan pembangunan.
• Nesting boleh menyebabkan masalah lain. Sangat mudah untuk membina pemilih yang sangat bersarang yang menjadi semakin sukar untuk membaca dan mengeluarkan CSS verbose.

: IS () menyediakan penyelesaian CSS asli yang mempunyai sokongan penuh dalam semua pelayar moden (tidak iaitu):

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

Pemilih tunggal boleh mengandungi bilangan: adalah () kelas pseudo. Sebagai contoh, pemilih kompleks berikut menggunakan warna teks hijau untuk semua

,

, dan

unsur -unsur yang merupakan anak -anak yang mempunyai kelas. Anak pertama :

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

Kod bersamaan tanpa: adalah () memerlukan enam pemilih CSS:

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

Perhatikan bahawa: adalah () tidak dapat dipadankan :: sebelum dan :: Selepas unsur-unsur pseudo, jadi kod contoh ini akan gagal:

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

CSS: di mana pemilih kelas pseudo

: di mana () sintaks pemilih adalah sama dengan: adalah () dan juga disokong dalam semua pelayar moden (bukan IE). Ia sering akan menghasilkan gaya yang sama. Contohnya:

<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>

Perbezaannya ialah kekhususan . Kekhususan adalah algoritma yang digunakan untuk menentukan pemilih CSS yang harus mengatasi semua yang lain. Dalam contoh berikut, Artikel P lebih spesifik daripada P sahaja, jadi semua elemen perenggan dalam akan menjadi kelabu:

<span><span>:where(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

Dalam kes: adalah (), kekhususan adalah pemilih yang paling spesifik yang terdapat dalam argumennya. Dalam kes: di mana (), kekhususan adalah sifar. Pertimbangkan CSS berikut:

<span>article p { color: #444; }
</span><span>p { color: #000; }
</span>

Mari gunakan CSS ini kepada HTML berikut:

<span>article p {
</span>  <span>color: black;
</span><span>}
</span>
<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: red;
</span><span>}
</span>
<span><span>:where(article, section, aside) p</span> {
</span>  <span>color: blue;
</span><span>}
</span>

Teks perenggan akan berwarna merah, seperti yang ditunjukkan dalam demo codepen berikut.

Lihat pen Menggunakan: adalah pemilih oleh SitePoint (@SitePoint) pada codepen.

The: adalah () pemilih mempunyai kekhususan yang sama seperti Artikel P, tetapi ia datang kemudian dalam lembaran styleshe, jadi teks menjadi merah. Ia perlu menghapuskan kedua -dua artikel p dan: adalah () pemilih untuk memohon warna biru, kerana: di mana () pemilih kurang spesifik daripada sama ada. Lebih banyak codebase akan digunakan: adalah () daripada: di mana (). Walau bagaimanapun, kekhususan sifar: di mana () boleh menjadi praktikal untuk reset CSS, yang menggunakan garis dasar gaya standard apabila tiada gaya tertentu tersedia. Biasanya, reset memohon fon lalai, warna, padding dan margin. Kod Reset CSS ini menggunakan margin teratas 1EM ke

tajuk kecuali mereka adalah anak pertama dari unsur :

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

Percubaan untuk menetapkan margin teratas

tersuai kemudian di lembaran gaya tidak mempunyai kesan, kerana artikel: anak pertama mempunyai kekhususan yang lebih tinggi:

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

Anda boleh membetulkannya dengan menggunakan pemilih khusus yang lebih tinggi, tetapi lebih banyak kod dan tidak semestinya jelas kepada pemaju lain. Anda akhirnya akan lupa mengapa anda memerlukannya:

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

Anda juga boleh membetulkan masalah dengan memohon! Penting untuk setiap gaya, tetapi sila elakkan melakukan itu! Pilihan yang lebih baik adalah mengamalkan kekhususan sifar: di mana () dalam tetapan semula CSS anda:

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

Anda kini boleh mengatasi sebarang gaya reset CSS tanpa mengira kekhususan; Tidak perlu pemilih selanjutnya atau! Penting:

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

CSS: Mempunyai pemilih kelas pseudo

The: mempunyai () pemilih menggunakan sintaks yang sama ke: adalah () dan: di mana (), tetapi ia mensasarkan elemen yang

mengandungi satu set orang lain. Sebagai contoh, inilah CSS untuk menambah sempadan dua piksel biru ke mana-mana pautan yang mengandungi satu atau lebih atau

tags:

Ini adalah pembangunan CSS yang paling menarik dalam beberapa dekad!

<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>

pemaju akhirnya mempunyai cara untuk menargetkan elemen induk! "Pemilih induk" yang sukar difahami telah menjadi salah satu ciri CSS yang paling diminta, tetapi ia menimbulkan komplikasi prestasi untuk vendor penyemak imbas, dan ia telah lama datang. Dalam istilah sederhana:

Pelayar memohon gaya CSS ke elemen apabila ia ditarik pada halaman. Oleh itu, seluruh elemen induk mesti ditarik semula apabila menambahkan elemen kanak-kanak lagi.
Menambah, membuang, atau mengubahsuai unsur -unsur dalam JavaScript boleh menjejaskan gaya seluruh halaman sehingga ke Conscosing .

Dengan mengandaikan vendor telah menyelesaikan masalah prestasi, pengenalan: mempunyai () membenarkan kemungkinan yang tidak mungkin tanpa JavaScript pada masa lalu. Sebagai contoh, anda boleh menetapkan gaya bentuk luar

dan butang hantar berikut apabila mana -mana medan dalaman yang diperlukan tidak sah:

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

Contoh ini menambah penunjuk submenu pautan navigasi yang mengandungi senarai item menu kanak -kanak:

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

Atau mungkin anda boleh menambah gaya debugging, seperti menonjolkan semua unsur -unsur tanpa IMG dalaman:

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

Sebelum anda melompat ke editor dan refactor anda CodeBase CSS anda, sila sedar bahawa: telah () adalah baru dan sokongan lebih terhad daripada: adalah () dan: di mana (). Ia boleh didapati di Safari 15.4 dan Chrome 101 di belakang bendera eksperimen, tetapi ia harus tersedia secara meluas pada tahun 2023.

Ringkasan pemilih

The: adalah () dan: di mana () pemilih kelas pseudo memudahkan sintaks CSS. Anda akan mempunyai kurang keperluan untuk bersarang dan preprocessors CSS (walaupun alat tersebut memberikan manfaat lain seperti sebahagian, gelung, dan minifikasi). : mempunyai () jauh lebih revolusioner dan menarik. Pemilihan ibu bapa akan menjadi popular dengan cepat, dan kami akan melupakan masa -masa gelap! Kami akan menerbitkan tutorial penuh: mempunyai () tutorial apabila ia tersedia dalam semua pelayar moden. Jika anda ingin menggali lebih mendalam kepada pemilih kelas pseudo CSS-bersama-sama dengan semua perkara lain CSS, seperti Grid dan Flexbox-lihat buku hebat CSS Master , oleh Tiffany Brown.

Soalan Lazim (Soalan Lazim) Mengenai CSS: adalah () dan: di mana () pemilih kelas pseudo

Apakah perbezaan utama antara: adalah () dan: di mana () pemilih kelas pseudo dalam css?

terletak pada kekhususan mereka. The: adalah () pemilih kelas pseudo mempunyai kekhususan yang sama seperti pemilih yang diletakkan di dalamnya. Sebaliknya,: di mana () pemilih kelas pseudo mempunyai kekhususan sifar, yang bermaksud ia tidak menyumbang kepada kekhususan keseluruhan pemilih. Ini boleh menjadi sangat berguna apabila anda ingin memohon gaya kepada sekumpulan elemen tanpa meningkatkan kekhususan. >

Ya, anda boleh menggunakan: adalah () dan: di mana () pemilih kelas pseudo dengan semua sifat CSS. Pemilih kelas pseudo ini tidak terikat dengan sifat CSS tertentu. Mereka digunakan untuk memilih elemen berdasarkan syarat -syarat tertentu, dan anda boleh memohon sebarang harta CSS ke unsur -unsur yang dipilih.

adalah: adalah () dan: di mana () pemilih kelas pseudo yang disokong dalam semua pelayar? disokong dalam penyemak imbas yang paling moden. Walau bagaimanapun, mereka mungkin tidak disokong dalam pelayar yang lebih tua atau beberapa versi Internet Explorer. Adalah idea yang baik untuk menyemak sokongan penyemak imbas semasa di laman web seperti yang boleh saya gunakan sebelum menggunakan pemilih ini dalam kod anda.

Bagaimana saya boleh menggunakan: adalah () pemilih kelas pseudo dalam css?

The: adalah () pemilih kelas pseudo dalam CSS membolehkan anda mengumpulkan beberapa pemilih ke dalam satu. Sebagai contoh, bukannya menulis tiga pemilih berasingan untuk H1, H2, dan H3, anda boleh mengumpulkannya bersama-sama menggunakan: adalah () pemilih kelas pseudo seperti ini :: adalah (H1, H2, H3) {Warna: Biru; . adalah () pemilih kelas pseudo, tetapi ia mempunyai kekhususan sifar. Sebagai contoh, anda boleh menggunakannya untuk memilih semua elemen dengan kelas tertentu tanpa meningkatkan kekhususan :: di mana (.class1, .class2, .class3) {color: blue; }.

Bolehkah saya bersarang: adalah () dan: di mana () pemilih kelas pseudo? Ini berguna apabila anda ingin memilih elemen yang memenuhi pelbagai syarat. Sebagai contoh, anda boleh memilih semua elemen H1 dan H2 di dalam elemen div seperti ini: div: adalah (h1, h2) {color: blue; }.

boleh saya gunakan: adalah () dan: di mana () pemilih kelas pseudo dengan elemen pseudo? -Kelas pemilih dengan elemen pseudo. Sebagai contoh, anda boleh memilih semua huruf pertama elemen H1 dan H2 seperti ini :: adalah (H1, H2) :: pertama-huruf {warna: biru; }.

boleh saya gunakan: adalah () dan: di mana () pemilih kelas pseudo dengan pemilih atribut? Pemilih kelas dengan pemilih atribut. Sebagai contoh, anda boleh memilih semua elemen dengan atribut data seperti ini :: adalah ([data-attribute]) {color: blue; }.

boleh saya gunakan: adalah () dan: di mana () pemilih kelas pseudo dengan pemilih kelas? Pemilih kelas dengan pemilih kelas. Sebagai contoh, anda boleh memilih semua elemen dengan kelas tertentu seperti ini :: adalah (.class1, .class2, .class3) {color: blue; }.

boleh saya gunakan: adalah () dan: di mana () pemilih kelas pseudo dengan pemilih id? Pemilih kelas dengan pemilih ID. Sebagai contoh, anda boleh memilih semua elemen dengan ID tertentu seperti ini :: adalah ( #id1, #id2, #id3) {color: blue; }.

Atas ialah kandungan terperinci Bagaimana CSS: adalah ,: di mana dan: mempunyai pemilih kelas pseudo berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!