tetapan keutamaan css

Dalam pembangunan web, gaya CSS ialah elemen penting dalam pengindahan halaman web. Ia boleh menjadikan halaman web lebih cantik dan mudah dibaca dengan menetapkan warna, fon, reka letak, dsb. Walau bagaimanapun, apabila elemen yang sama ditakrifkan oleh berbilang peraturan CSS, isu keutamaan CSS timbul. Jadi, bagaimana untuk menetapkan keutamaan CSS dengan betul?

Keutamaan CSS merujuk kepada peraturan yang mempunyai keutamaan yang lebih tinggi antara berbilang peraturan CSS, sekali gus memutuskan gaya yang hendak digunakan. Berikut ialah keutamaan peraturan CSS, daripada tertinggi hingga terendah:

1. !penting

!penting ialah pengisytiharan keutamaan tertinggi dalam CSS, yang mengatasi semua peraturan CSS lain. Tetapi gunakan !important dengan berhati-hati dan hanya apabila anda benar-benar perlu mengatasi peraturan lain.

Contohnya:

.color {
  color: red !important;
}

2. Gaya sebaris

Gaya sebaris merujuk kepada mentakrifkan gaya CSS secara langsung dalam teg HTML, keutamaannya adalah kedua !penting.

Contohnya:

<h1 style="color: blue;">Hello World!</h1>

3. Pemilih ID

Pemilih ID mentakrifkan gaya berdasarkan atribut id elemen HTML dan keutamaannya ialah lebih tinggi daripada Pemilih kelas dan pemilih label tinggi.

Contohnya:

#header {
  background-color: gray;
}

4. Pemilih kelas, pemilih atribut dan kelas pseudo

Pemilih kelas mentakrifkan gaya berdasarkan atribut kelas elemen HTML , mempunyai keutamaan yang lebih tinggi daripada pemilih label.

Pemilih atribut mentakrifkan gaya berdasarkan atribut elemen HTML, seperti [type="text"].

Pseudo-class mentakrifkan gaya melalui status elemen HTML, seperti: hover.

Contohnya:

p.intro {
  font-size: 16px;
}

input[type="text"] {
  border: 1px solid gray;
}

a:hover {
  color: green;
}

5. Pemilih teg dan elemen pseudo

Pemilih teg mentakrifkan gaya berdasarkan nama teg elemen HTML, yang ialah pemilih yang paling biasa digunakan. Elemen pseudo

digayakan melalui aksara khas dalam elemen HTML, seperti ::before dan ::after.

Contohnya:

h1 {
  font-size: 24px;
}

li::before {
  content: "-";
}

Dalam pembangunan sebenar, adalah disyorkan untuk mengelak daripada menggunakan !important kerana ia mungkin melanggar jangkaan peraturan CSS dan menyebabkan kekeliruan. Pemilih teg hendaklah digunakan mengikut keutamaan kepada pemilih kelas, pemilih ID dan pemilih lain hanya apabila perlu.

Apabila menentukan tahap diskaun, anda juga perlu memahami susunan bertingkat peraturan CSS. Apabila dua peraturan CSS dengan keutamaan yang sama digunakan pada elemen yang sama, susunan melata akan menentukan peraturan yang harus digunakan. Susunan melata ditentukan oleh jenis elemen (elemen HTML, unsur pseudo), sumber peraturan (helaian gaya bersekutu, helaian gaya pengguna, helaian gaya proksi) dan kekhususan peraturan CSS.

Ringkasnya, tetapan keutamaan CSS merupakan bahagian yang sangat diperlukan dalam pengindahan halaman web. Tetapan yang betul boleh menjadikan halaman web lebih cantik dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci tetapan keutamaan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!