Peraturan keutamaan pemilih CSS3-tutorial css-php.cn

Peraturan keutamaan pemilih CSS3

WBOY

Lepaskan： 2024-02-19 14:51:06

asal

678 orang telah melayarinya

Peraturan keutamaan pemilih CSS3

Tempahan Keutamaan Pemilih CSS3

Dalam CSS, keutamaan pemilih menentukan peraturan yang akan digunakan pada elemen. Apabila berbilang peraturan mempunyai keutamaan yang sama, peraturan tersebut digunakan mengikut susunan yang dipaparkan. Untuk peraturan dengan keutamaan yang berbeza, CSS menggunakan algoritma khusus untuk menentukan peraturan yang akhirnya digunakan. Di bawah ini kami akan memperkenalkan susunan keutamaan pemilih dalam CSS3 dan memberikan contoh kod khusus.

Dalam CSS, keutamaan pemilih ditentukan oleh faktor berikut:

Gaya sebaris: Gaya sebaris ialah gaya yang digunakan terus pada elemen HTML, dicapai dengan menambahkan atribut gaya. Ia mempunyai keutamaan tertinggi.

Contohnya:

<div style="color: red;">This is a red text.</div>

Salin selepas log masuk

Pemilih ID: Pemilih ID dipadankan dengan atribut id elemen dan bermula dengan simbol #.

Contohnya:

<div id="myDiv">This is my div.</div>

Salin selepas log masuk

#myDiv {
  color: blue;
}

Salin selepas log masuk

Pemilih kelas, Pemilih atribut dan pemilih kelas Pseudo (Pemilih kelas, pemilih Atribut dan pemilih kelas Pseudo): Pemilih ini memadankan elemen mengikut nama kelas, atribut atau kelas pseudo. Pemilih kelas bermula dengan simbol ., pemilih atribut dibalut dalam kurungan persegi [] dan pemilih kelas pseudo bermula dengan titik bertindih:.

Contohnya:

<div class="myClass">This is my class.</div>

Salin selepas log masuk

.myClass {
  color: green;
}

[priority="high"] {
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

Salin selepas log masuk

Pemilih elemen dan pemilih unsur Pseudo: Pemilih ini memadankan elemen mengikut nama elemen atau elemen pseudo. Pemilih elemen menggunakan nama elemen secara langsung, dan pemilih elemen pseudo bermula dengan simbol ::.

Contohnya:

<p>This is a paragraph.</p>

Salin selepas log masuk

p {
  font-family: Arial;
}

p::first-letter {
  font-size: 24px;
}

Salin selepas log masuk

Jika berbilang pemilih dengan keutamaan yang sama muncul, tertib ditentukan dalam CSS3: Pemilih ID sebaris> .

Dalam penggunaan sebenar, kita sering menghadapi konflik pemilih Pada masa ini, kita perlu menyelesaikan konflik berdasarkan keutamaan pemilih. Berikut ialah contoh:

<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Selector Priority Example</title>
  <style>
    .myClass {
      color: blue;
    }

    #myDiv {
      color: red;
    }

    p {
      color: green;
    }
  </style>
</head>
<body>
  <div id="myDiv">
    <p class="myClass">This is a paragraph inside a div.</p>
  </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, elemen div mempunyai id "myDiv", elemen perenggan p mempunyai nama kelas "myClass", dan elemen p bersarang dalam elemen div. Oleh kerana helaian gaya sebaris mempunyai keutamaan tertinggi, warna elemen perenggan ialah merah.

Ringkasan: Urutan keutamaan pemilih dalam CSS3 ialah helaian gaya sebaris > pemilih ID > pemilih kelas, pemilih atribut dan pemilih kelas pseudo > pemilih elemen dan pemilih elemen pseudo. Semasa menulis gaya CSS, kita perlu memberi perhatian kepada keutamaan pemilih untuk memastikan gaya itu digunakan pada elemen mengikut cara yang kita harapkan.

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