Rumah > Artikel > hujung hadapan web > Bagaimanakah skor kekhususan CSS dikira?

Bagaimanakah skor kekhususan CSS dikira?

王林ke hadapan: 2023-09-14 14:09:142615semak imbas

Kekhususan CSS, ialah proses membezakan atau mengutamakan pemilih CSS yang berbeza berdasarkan mata, pemilih dengan mata kekhususan tertinggi akan menang dan gaya CSS pemilih itu akan digunakan pada elemen tersebut.

Hierarki mata setiap pemilih CSS dan keutamaannya ditunjukkan dalam jadual di bawah -

Terjemahan bahasa Cina ialah:

Sr. No.	nombor siri	Pemilih CSS
1	Pemilih Elemen	1
2	Pemilih Kelas	10
3	Pemilih ID	100
4	CSS sebaris	1000
5	Pemilih Elemen+Kelas	1 + 10 = 11
6	Pemilih Elemen+ID	1 + 100 = 101

Use Case − Katakan anda mempunyai elemen dengan kelas dan ID, dan anda ingin menambah gaya CSS padanya menggunakan pemilih kelas dan pemilih ID. Dalam kes ini, ia akan menggunakan gaya CSS yang ditakrifkan oleh pemilih ID kerana pemilih ID adalah 10x lebih khusus daripada pemilih kelas.

Sekarang marilah kita memahami perbezaan antara pemilih ini dan keutamaannya secara terperinci dengan bantuan contoh kod.

Langkah

Langkah 1 - Dalam langkah pertama, kami akan mentakrifkan elemen HTML dengan atribut kelas dan ID.
Langkah 2 - Dalam langkah ini, kami akan menulis CSS untuk elemen dengan memilihnya menggunakan pemilih CSS dan menyemak keutamaannya.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

Contoh berikut akan menggambarkan perbezaan antara pemilih CSS yang berbeza dan keutamaannya -

<html>
<head>
   <style>
      /* CSS of the main Div using Class = 10 points and ID = 100 points selectors */
      #IdDemo {
         background-color: #84abb5;
         color: white;
         height: 150px;
         text-align: center;
      }
      .classDemo {
         background-color: green;
         color: white;
         height: 400px;
         text-align: end;
      }
      /* Heading Styles to show difference between only class = 10 points and element + class selector = 11 points */
      h2.demoH2Class {
         color: #e6d4b6;
         background-color: #414141;
      }
      .demoH2Class {
         color: red;
         background-color: white;
      }
   </style>
</head>
<body>
<div id = "IdDemo" class = "classDemo">
<h2 class = "demoH2Class" id = "demoH2ID"> This is Heading of Demo element. </h2>
</div>
</body>
</html>

Dalam contoh di atas, kami telah menggunakan sifat CSS yang sama pada elemen yang sama dengan memilih elemen yang sama dengan bantuan dua pemilih berbeza dan kami dapat melihat dengan jelas pemilihan dengan titik kekhususan yang lebih tinggi CSS penyemak imbas digunakan pada elemen .

Contoh 2

Contoh di bawah akan menerangkan lebih lanjut tentang perbezaan pemilih CSS dalam mata istimewa mereka -

<html>
<head>
   <style>
      /* CSS of the main Div using and element + ID = 101 points selectors */
      div#IdDemo {
         background-color: green;
         color: blue;
         height: 250px;
         text-align: start;
      }
      /* Heading Styles to show difference between only ID = 100 points and element + ID = 101 points selector */
      h2#demoH2ID {
         color: #e6d4b6;
         background-color: #414141;
      }
      #demoH2ID {
         color: red;
         background-color: white;
      }
   </style>
</head>
<body>
   <!-- CSS of the main div is given inline = 1000 points and inside the ID + element = 101 points -->
   <div id = "IdDemo" class = "classDemo"
      style = "background-color: #84abb5; color: white; height: 150px; text-align: center;">
      <h2 class = "demoH2Class" id = "demoH2ID">This is Heading of Demo element.</h2>
   </div>
</body>
</html>

Dalam contoh di atas, kami telah menggunakan sifat CSS yang sama sekali lagi tetapi dengan nilai yang berbeza dalam pemilih CSS yang berbeza. Dalam kes elemen div utama, kami menggunakan pemilih sebaris dan ID untuk menggunakan CSS, tetapi memandangkan pemilih sebaris mempunyai keutamaan yang lebih tinggi daripada pemilih ID, CSS sebaris telah digunakan pada elemen. Dalam kes pengepala h2, kami menggunakan pemilih ID dan elemen+ID, CSS yang terakhir adalah lebih khusus, jadi CSS pemilih elemen+ID digunakan pada elemen tersebut.

Kesimpulan

Dalam artikel ini, kami bukan sahaja mempelajari pengiraan mata kekhususan CSS, tetapi juga mempelajari secara terperinci perbezaan antara keutamaan CSS yang ditulis di dalam pemilih CSS yang berbeza dan titik kekhususannya, dan mempraktikkannya dengan contoh kod beroperasi. Kami melihat perbezaan antara pemilih CSS dengan memilih pemilih yang berbeza secara serentak untuk memberikan nilai yang berbeza kepada sifat CSS pada elemen yang sama.

Atas ialah kandungan terperinci Bagaimanakah skor kekhususan CSS dikira?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html 选择器

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Sifat asal perspektif CSSArtikel seterusnya：Sifat asal perspektif CSS

Artikel berkaitan

Lihat lagi