Cara menetapkan keutamaan dalam css (peraturan berat)

PHPz
Lepaskan: 2023-04-24 10:37:02
asal
3757 orang telah melayarinya

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;
Salin selepas log masuk
/

Pemilih Elemen
/ p{

}
font-size: 18px;
color: blue;
Salin selepas log masuk
/

Pemilih elemen
/.div bekas{

}
font-size: 14px;
color: green;
Salin selepas log masuk
/

Pemilih Kelas
/.class1{

}
font-size: 24px;
color: yellow;
Salin selepas log masuk
/

Pemilih ID
/id1{

}
font-size: 28px;
color: purple;
Salin selepas log masuk

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;
Salin selepas log masuk
p{


}
color: blue;
Salin selepas log masuk

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;
Salin selepas log masuk
p{


}
color: yellow;
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan