Peringatan sedikit bahawa elemen pseudo adalah kanak -kanak, agak.

Pseudo-Element: Nampaknya elemen kanak-kanak, tidak seperti ini

Mari kita lihat bekas yang mengandungi elemen kanak -kanak:

<div class="container">
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>

Sekiranya kita menambah gaya berikut:

 .container :: sebelum {
  Kandungan: "x";
}

Kesannya bersamaan dengan:

<div class="container">
  [[:: sebelum pseudo-element]]]
  <div>item</div>
  <div>item</div>
  <div>item</div>
</div>

Tingkah laku elemen pseudo adalah serupa dengan unsur-unsur kanak-kanak dalam kebanyakan kes. Walau bagaimanapun, perbezaan penting ialah tiada pemilih lain boleh memilih secara langsung kecuali pemilih yang menciptanya (atau pemilih yang serupa seperti ::before atau ::after ).

Sebagai contoh, katakan kami menetapkan bekas ke grid 2x3, dengan setiap elemen kanak-kanak menjadi reka bentuk seperti pil:

 .container {
  paparan: grid;
  Grid-template-lajur: 1FR 1FR;
  Grid-Gap: 0.5rem;
}

.container> * {
  Latar Belakang: Darkgray;
  Radius sempadan: 4px;
  Padding: 0.5rem;
}

Sekiranya tidak ada unsur-unsur pseudo, kesannya adalah seperti yang diharapkan. Tetapi selepas menambah elemen pseudo, anda akan mendapati bahawa ia mengambil bahagian dalam susun atur grid, yang mungkin tidak dijangka. Elemen pseudo sering digunakan untuk tujuan hiasan, dan nampaknya agak pelik untuk mengambil bahagian dalam susun atur kandungan.

Perhatikan bahawa .container > * pemilih tidak membuat kelabu gelap pseudo-elemen juga, kerana anda tidak boleh memilih elemen pseudo dengan cara ini. Ini adalah satu lagi isu kecil yang perlu diperhatikan.

Dalam pembangunan harian, elemen pseudo biasanya menggunakan position: absolute untuk operasi hiasan:

 .container :: sebelum {
  Kandungan: "";
  Kedudukan: Mutlak;
  /* Gaya hiasan*/
}

Dalam kes ini, anda mungkin tidak dapat melihat kewujudan elemen pseudo sama sekali. Walaupun ia masih secara teknikal elemen kanak -kanak, mengambil bahagian dalam struktur DOM, ia tidak mengambil bahagian dalam susun atur grid. Ini bukan fenomena yang unik untuk grid CSS. Di Flexbox, unsur-unsur pseudo juga akan menjadi projek flex. Anda boleh mengawal unsur-unsur pseudo seperti yang anda suka menggunakan kaedah susun atur terapung atau lain-lain.

Alat pemaju dengan jelas menunjukkan bahawa unsur-unsur pseudo adalah serupa dengan unsur-unsur kanak-kanak di DOM.

Terdapat beberapa isu lain yang perlu diperhatikan:

Satu ialah :nth-child() . Anda mungkin berfikir bahawa jika elemen pseudo adalah unsur-unsur kanak-kanak, mereka akan mempengaruhi pengiraan :nth-child() , tetapi itu tidak berlaku. Ini bermaksud:

 .container>: nth-child (2) {
  Latar Belakang: Merah;
}

Unsur yang sama dipilih tanpa mengira sama ada ::before pseudo-elemen wujud atau tidak. Begitu juga dengan pemilih seperti ::after , :nth-last-child , dan lain-lain. Ini sebabnya "agak" dalam tajuk. Jika elemen pseudo sama seperti elemen kanak-kanak, mereka mempengaruhi pemilih ini.

Satu lagi masalah ialah anda tidak boleh memilih unsur-unsur pseudo di JavaScript seperti anda akan memilih elemen kanak-kanak biasa. document.querySelector(".container::before"); akan kembali null . Jika anda perlu mengakses gaya unsur-unsur pseudo di JavaScript, anda boleh menggunakan CSSOM:

 Const Styles = Window.GetComputStyle (
  Document.QuerySelector ('. Container'),
  ':: sebelum'
);
console.log (styles.content); // "x"
console.log (styles.color); // RGB (255, 0, 0)
Console.log (Styles.GetPropertyValue ('Color')); // RGB (255, 0, 0)

Adakah anda menghadapi masalah lain dengan elemen pseudo?

Atas ialah kandungan terperinci Peringatan sedikit bahawa elemen pseudo adalah kanak -kanak, agak.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!