tetapan keutamaan css

Dalam penghasilan halaman web, kita selalunya perlu menggunakan CSS untuk mengawal gaya. Dalam CSS, terdapat banyak cara untuk mentakrifkan gaya, dan cara berbeza mungkin mentakrifkan gaya untuk elemen yang sama pada masa yang sama Dalam kes ini, isu keutamaan CSS akan terlibat. Satu elemen mungkin mempunyai berbilang takrifan gaya CSS dan cara menentukan gaya yang akhirnya akan berkuat kuasa memerlukan pemahaman tetapan keutamaan CSS.

Keutamaan pemilih CSS

Pemilih CSS ialah peraturan yang digunakan untuk menentukan elemen yang menggunakan gaya mana. Dalam CSS, keutamaan pemilih ditentukan oleh berat. Setiap pemilih mempunyai nilai berat Lebih besar nilai berat, lebih keutamaan ia berkuat kuasa.

Kaedah pengiraan nilai berat pemilih CSS ialah:

• Untuk setiap pemilih, nilai asas ditetapkan mengikut jenis pemilih dan syarat kelayakan yang sepadan, seperti: pemilihan elemen Pemilih ialah 1, pemilih kelas ialah 10, pemilih ID ialah 100 dan gaya sebaris ialah 1000
• Untuk urutan pemilih (pemilih berbilang dipisahkan dengan koma), asas setiap pemilih ialah; Nilai-nilai ditambah untuk mendapatkan jumlah;
Contoh:

• <style>
      #idSelector {
          color: blue;
      }
      .classSelector {
          color: green;
      }
      div {
          color: red;
      }
  </style>
  <div id="idSelector" class="classSelector">Hello World!</div>

Dalam contoh ini, elemen

memenuhi pemilih ID

dan pemilih kelas

, serta pemilih elemen

, maka CSS akan menjadi seperti berikut Peraturan untuk menentukan gaya akhir yang digunakan: Hello World!#idSelector.classSelectorNilai berat pemilih ID ialah 100, maka nilai asas #idSelector ialah 100 div

Nilai berat bagi pemilih kelas ialah 10, Maka nilai asas .classSelector ialah 10; nilai berat pemilih elemen

• ialah 1, maka nilai asas bagi div ialah 1; peraturan menambah nilai berat, #idSelector Jumlah nilai berat ialah 100, jumlah nilai berat .classSelector ialah 10, dan jumlah nilai berat div ialah 1
• Akhir sekali, mengikut peraturan pemilih dengan nilai keutamaan terbesar, gaya elemen
akan digunakan Gaya iaitu warna fon dalam pemilih ID
• akan bertukar menjadi biru.
• Kepentingan Harta CSS
• dc6dce4a544fdca2df29d5ac0ea9906bKadangkala, kami mungkin mahu beberapa peraturan gaya mengatasi peraturan gaya lain tanpa syarat. Pada masa ini, kita perlu menggunakan atribut !important CSS. Dalam CSS, !important boleh memaksa peraturan gaya tertentu untuk berkuat kuasa dahulu. #idSelector
Contoh:

<style>
    p {
        color: blue !important;
    }
    .classSelector {
        color: green;
    }
</style>
<div class="classSelector">
    <p>Hello World!</p>
</div>

Dalam contoh ini, elemen P mempunyai atribut warna yang digunakan dan dipaksa untuk !penting. Jika tiada teg !important, elemen P sebenarnya menggunakan atribut warna dalam

(lalai ialah hijau), tetapi disebabkan penambahan !important, warna elemen P akan dipaksa menjadi biru.

!teg penting bukan mahakuasa dan tidak boleh mengatasi gaya sebaris. Apabila gaya sebaris wujud, walaupun !important ditetapkan untuk pemilih, ia akan ditindih oleh gaya sebaris.

Keutamaan gaya sebaris CSS

.classSelectorDalam HTML, gaya sebaris ialah gaya yang ditakrifkan terus dalam elemen teg HTML. Memandangkan gaya sebaris bertindak pada satu elemen, gaya sebaris sentiasa mempunyai keutamaan tertinggi.

Contoh:

<div style="color: red">Hello world!</div>

Dalam contoh ini, elemen div menggunakan gaya sebaris dan warnanya merah. Walaupun peraturan gaya CSS lain ditambahkan, gaya sebaris tidak akan terjejas. Dalam contoh ini, warna elemen div mestilah merah.

Peraturan warisan CSS

Peraturan warisan CSS menetapkan bahawa atribut gaya tertentu boleh diwarisi daripada elemen induk. Apabila elemen tidak menentukan nilai sifat CSS tertentu, ia diwarisi daripada elemen induk. Sebagai contoh, nilai dua atribut CSS

dan

yang mungkin kerap digunakan boleh diwarisi daripada elemen induk.

Contoh:

<style>
    div {
        color: red;
    }
    .classSelector {
        font-size: 18px;
        font-family: Arial;
    }
</style>
<div class="classSelector">Hello world!</div>

Dalam contoh ini, elemen div menetapkan warna kepada merah tanpa menetapkan atribut fon. Elemen anak menggunakan atribut fon font-family, jadi fon akan diwarisi daripada font-size, iaitu saiz fon ialah 18 piksel dan fon ialah Arial. Warna akan diwarisi daripada div elemen induk, iaitu merah.

Ringkasan:

Walaupun peraturan keutamaan CSS agak menyusahkan, jika kita menguasainya, kita boleh mengawal gaya dengan lebih baik. Apabila menetapkan keutamaan, kami boleh memenuhi keperluan kami untuk keutamaan atribut gaya tertentu dengan menukar berat pemilih dan atribut !penting gaya. Pada masa yang sama, kita juga harus ambil perhatian bahawa gaya sebaris mempunyai keutamaan tertinggi dan akan mengatasi semua peraturan gaya lain. Peraturan warisan CSS juga membolehkan kami mengurangkan jumlah kod dan mengekalkan kod halaman web dengan lebih baik sambil memastikan ketekalan peraturan gaya. .classSelector

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