CSS -Prioritas aturan (berat)

Tahukah Anda bahwa CSS memberikan bobot khusus untuk setiap aturan gaya? Ini adalah aspek yang sangat penting dari CSS karena akan menghindari ketidakkonsistenan antara apa yang ingin Anda dapatkan dan apa yang Anda dapatkan dalam kenyataan.

Sebuah contoh:

Coba kode HTML berikut:

 div {background-color: blue;} 

Hasilnya, Anda akan mendapatkan kotak biru 100X100 px.

Sekarang tambahkan kelas ke dalamnya:

 div {background-color: blue;}. MaDiv {background-color: red;} 

Alun-alun berubah merah!

Sekarang gunakan ID:

 div {background-color: blue;} .maDiv {background-color: red;} #maDiv {background-color: yellow;} 

Kotak sekarang berwarna kuning karena ID lebih kuat dari kelas.

Selanjutnya gunakan gaya mendefinisikan ithe tag:

 div {background-color: blue;}. MaDiv {warna latar: merah;} # MaDiv {warna latar: kuning;} 

Kotak berubah menjadi hijau: sementara secara teori, empat warna berbeda telah ditetapkan untuk itu!

Bobotnya

Hasil ini adalah konsekuensi dari bobot (juga disebut aturan prioritas) CSS:

• Berat tag adalah 1
• Berat kelas adalah 10.
• Berat ID adalah 100.
• Berat atribut gaya adalah 1000.

Ini adalah bobot dasar, ada yang lain, misalnya, pseudo-class (: hover, : after, : focus ...). Contoh atribut CSS: hover hanya menambah sedikit berat elemen ketika kursor mouse dilewatkan.

Akumulasi berat

Aturan gaya kemudian dapat memiliki bobot menengah. Memang, tumpukan berat.

Contoh:

 div {background-color: blue;} .maDiv {background-color: red;} .maDiv {background-color: yellow;} 

Seperti yang Anda lihat, saya memiliki elemen (berat 1) dan dua kelas yang sama (berat 10): elemen terakhir mengambil alih dan kuadrat kita berwarna kuning. Sekarang setelah menambahkan

 div {background-color: blue;} div.maDiv {background-color: red;} .maDiv {background-color: yellow;} 

Kotak berubah merah. Mengapa?

• ".maDiv" - 10
• "div.maDiv" menggabungkan elemen dan kelas - 11!

Peringatan: terkadang menambahkan kelas ke aturan tidak akan cukup untuk menambah bobot semua elemen yang terlibat.

Catat itu

Bandingkan hasil dari kode ini:

 div {background-color: blue;} div # maDiv {background-color: red;} 

Dengan hasil yang satu ini:

 div {background-color: blue;} div #maDiv {background-color: red;} 

Dalam kasus pertama div kita berwarna merah, dalam kasus kedua itu biru!

"Tapi kenapa, elemen + ID =, jadi itu harus selalu merah!"

Perhatikan perbedaannya:

• div # maDiv : berlaku untuk div dengan ID "maDiv".
• div #maDiv : Berlaku untuk semua elemen yang IDnya "maDiv" terkandung dalam elemen induk yang disebut "div".

Alun-alun kami hanya peduli dengan aturan pertama. Sebagai aturan umum, selalu perhatikan bagaimana Anda menulis aturan Anda, gunakan spasi dengan benar, koma..etc

Contoh:

• p .myClass a {} : untuk semua tautan yang ada dalam elemen apa pun yang kelasnya "myClass", semua terkandung dalam

  elemen. Berat: 12.

• p.myClass, a {} : untuk semua tautan dan semua

  yang kelasnya "myClass". Berat: 11 atau 1

• p, .myClass, a {} : untuk semua tautan dan semua elemen yang kelasnya "myClass" dan semuanya

  elemen. Berat: 1 hingga 10 atau 1