Ketahui lebih lanjut tentang :is() dan :where() dalam CSS untuk menjadikan kod gaya anda lebih ringkas!

Artikel ini akan memberi anda pemahaman yang mendalam tentang dua pemilih yang agak cekap dalam CSS, anda boleh menggunakan kurang kod untuk memilih elemen dengan lebih berkesan, dengan itu memudahkan kod.

Apabila pendatang baru mula menggunakan CSS, mereka selalunya paling keliru dengan dua perkara (fikiran peribadi): 1. CSS adalah berdasarkan aliran dokumen, dan kadangkala kod yang ditulis adalah Tidak sesuai dengan jangkaan saya! 2. Pemilih kompleks, pemilih yang harus digunakan dalam senario yang berbeza, dan pemilih terlalu panjang, yang menjadikan pendatang baru sangat keliru. Sekeping kod seperti itu baru-baru ini ditemui dalam kod syarikat.

.home .col .card a i.i1,
.home .col .card a i.i2,
.home .col .card a i.i3,
.home .col .card a i.i4,
.home .col .card a i.i5,
.home .col .card a i.i5,
.home .col .card a i.i6,
.home .col .card a i.i7 {
  background-size: 35px;
  width: 60px;
  height: 42px;
  margin: auto;
}

Sekilas pandang, memang ramai yang jadi orang serah terima.

Anda boleh menggunakan otak kecil anda dan mencuba penyelesaian yang berbeza untuk memudahkan singkatan kod ini!

Dalam artikel ini, kita akan bercakap tentang pemilih CSS3 yang lebih cekap, memastikan pemilih yang menarik perhatian.

:is

Pilih elemen dengan lebih cekap dengan kurang kod! 666, hebat! ! !

Ringkasnya, kod dipermudahkan dengan mengekstrak pemilih biasa!

Nota: :is() nama asal :match()

Contoh 1. Global: is

Senario: Semasa pembangunan front-end, tertentu Dalam sesetengah kes, warna teks mungkin konsisten dalam div yang berbeza.

Contohnya, dalam tiga div di bawah, warna teks bagi tiga div semuanya berwarna merah.

    <div class="div1">
        <p>p1</p>
    </div>
    <div class="div2">
        <p>p2</p>

    </div>
    <div class="div3">
        <p>p3</p>
    </div>

Versi asas (novis)

Bagi ramai orang baru, kaedah penulisan berikut memang akan muncul: tetapkan p yang sama untuk div yang berbeza.

.div1>p{
    color:red;
}
.div2>p{
    color:red;
}
.div3>P{
    color:red;
}

Versi lanjutan

Apabila kod yang ditulis meningkat, orang baru secara beransur-ansur mendapati bahawa terdapat banyak kod biasa yang boleh diekstrak. Contohnya, warna:merah di sini boleh diekstrak. Wah, kod telah dikurangkan dengan banyak serta-merta! ! !

.div1>p,
.div2>p,
.div3>P{
    color:red;
}

Versi lanjutan (:is)

Pada masa ini, orang baru terasa lagi, kerana warna:merah boleh disebut, kenapa tidak p? Jadi versi yang lebih ringkas berikut muncul.

:is(.div1,.div2,.div3) >P {
  color:red;
}

Contoh 2 Elemen khusus: ialah

Lihat kod berikut, kami ingin menyedari bahawa warna div adalah merah, dan definisi warna adalah dalam textColor, dan mengekalkan p hitam.

<div class="textColor">
        p1
</div>
<div class="textColor">
    p2
</div>
<div class="textColor">
    p3
</div>
<p class="textColor">p4</p>

Selepas membaca Contoh 1 di atas, saya rasa beberapa orang baru akan mula menulis seperti ini: terus menambah gaya baharu pada tag p.

:is(.textColor) {    color:red;

}.pColor{   color: black;
}
<p class="textColor pColor">p4</p>

Walau bagaimanapun: is menyokong penulisan elemen tertentu: anda hanya perlu menambah

div:is(.textColor) {
    color:red;
}

berbilang:is di hadapan:is

div:is(.textColor) :is(h1,h4){
  color:red;
}
<div class="textColor">
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
</div>

Berat

: Berat is ditentukan oleh id yang disediakan, elemen dan pemilih lain; ia mungkin sukar difahami. Satu contoh akan menjadikannya jelas dengan segera.

<ol id="olID">
    <li>li1</li>
    <li>li2</li>
</ol>

Jom tukar warna fon li.

:is(ol) li {
  color: red;
}
ol li {
  color: blue;
}

Anda boleh teka warna apa.

berwarna biru: Mengapa, pertama sekali, parameter ialah ol, yang konsisten dengan berat pemilih ol di bawah. Dan kerana biru berada di bahagian bawah, penyemak imbas secara automatik menggunakan biru untuk menutup merah.

Melihat tulisan di bawah, kami menambah id pada parameter ialah: #olID, dan warna akhir ialah merah. Ini kerana is menggunakan pemilih id berat yang lebih tinggi.

 :is(ol,#olID) li {
        color: red;
      }
      ol li {
        color: blue;
      }

:where

:Parameter sintaks where dan :is adalah betul-betul sama. Satu-satunya perbezaan ialah berat di mana sentiasa 0, atau yang paling rendah. Masih contoh yang sama di atas.

<ol id="olID">
  <li>li1</li>
  <li>li2</li>
</ol>

Di sini kami:

:where(ol,#olID) li {
  color: red;
}
ol li {
  color: blue;
}

Keputusan akhir adalah biru

Senario aplikasi

Kerana Saya perlu katakan, kerana anda ada, mengapa anda perlu: di mana secara peribadi, saya fikir: di mana masih sangat berguna. Sebagai contoh, apabila membangunkan perpustakaan komponen, ia boleh digunakan, kerana berat di mana sangat rendah, jadi mudah untuk pengguna untuk menutupnya, dan tidak perlu apa-apa, v-deep dan seumpamanya.

PS: Buah berangan kecil dalam kata pengantar boleh dioptimumkan

Alamat asal: https://juejin. cn/ post/7005366966554722312

Pengarang: pemilih bahagian hadapan

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Ketahui lebih lanjut tentang :is() dan :where() dalam CSS untuk menjadikan kod gaya anda lebih ringkas!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!