Cara menetapkan keutamaan dalam css (peraturan berat)

1. Apakah keutamaan tetapan CSS?

CSS (Cascading Style Sheets), cascading style sheets, digunakan untuk menambah gaya pada halaman web. Walau bagaimanapun, apabila beberapa peraturan CSS menggayakan elemen yang sama, akan ada masalah keutamaan gaya. Tetapan keutamaan CSS adalah penyelesaian kepada masalah ini.

Dalam CSS, setiap peraturan mempunyai berat tertentu Peraturan dengan wajaran yang lebih tinggi akan mengatasi peraturan dengan wajaran yang lebih rendah untuk mencapai keutamaan gaya. Keutamaan tetapan CSS melibatkan empat faktor: susunan pemilih, kelas, ID dan gaya.

2. Peraturan berat untuk menetapkan keutamaan dalam CSS

1. Berat pemilih

Dalam CSS, pemilih dibahagikan kepada pemilih elemen, pemilih kelas dan pemilih ID. Sekiranya berlaku konflik gaya, berat pemilih meningkat dalam susunan berikut:

Pemilih elemen (1)
Pemilih kelas (10)
Pemilih ID (100)

2. Berat kelas dan atribut

Berat kelas dan atribut adalah sama dengan berat pemilih Apabila gaya bercanggah, mereka juga menentukan keutamaan mengikut peraturan yang semakin meningkat di atas.

3. Susunan gaya

Apabila gaya bercanggah, gaya yang ditakrifkan kemudian akan menggantikan gaya yang ditakrifkan sebelum ini. Oleh itu, jika terdapat gaya yang ditakrifkan dengan berat yang sama, gaya yang ditentukan terakhir akan mengatasi gaya sebelumnya.

4.!kata kunci penting

Dalam CSS, kata kunci !important membenarkan definisi gaya mempunyai berat tertinggi, mengatasi definisi lain tanpa mengira pemilih, kelas, ID atau susunan . Walau bagaimanapun, kaedah ini harus dielakkan sebaik mungkin kerana ia akan memusnahkan pewarisan dan kebolehbacaan gaya.

3. Contoh tetapan keutamaan CSS

Untuk lebih memahami tetapan keutamaan CSS, berikut ialah beberapa contoh:

1 Peraturan gaya berikut akan digunakan secara keutamaan pada elemen div:

div{

}

font-size: 22px;
color: red;

/

Pemilih Elemen
/ p{

}

font-size: 18px;
color: blue;

/

Pemilih elemen
/.div bekas{

}

font-size: 14px;
color: green;

/

Pemilih Kelas
/.class1{

}

font-size: 24px;
color: yellow;

/

Pemilih ID
/id1{

}

font-size: 28px;
color: purple;

2. Gaya yang ditakrifkan kemudian mempunyai keutamaan yang lebih tinggi

Dalam peraturan gaya berikut, warna yang ditakrifkan kemudian mempunyai keutamaan yang lebih tinggi:

p{

}

color: red;

p{

}

color: blue;

3.!penting mempunyai keutamaan tertinggi

Dalam peraturan gaya berikut, warna : kuning; keutamaan tertinggi dan akan digunakan pada elemen p terlebih dahulu:

p{

}

color: red!important;
font-size: 18px;
color: blue;

p{

}

color: yellow;

4. Ringkasan

Keutamaan penetapan CSS diperkenalkan untuk menyelesaikan masalah konflik gaya. Sekiranya berlaku konflik gaya, susunan pemilih, kelas, ID dan gaya akan mempengaruhi keutamaan. Memahami peraturan untuk menetapkan keutamaan dalam CSS boleh menyelesaikan masalah gaya dengan lebih baik dan meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Cara menetapkan keutamaan dalam css (peraturan berat). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!