Bolehkah jQuery Pilih CSS Pseudo-elemen Seperti :sebelum dan :selepas?

Mengakses Pseudo-Elements melalui jQuery

Semasa mengerjakan soalan sebelumnya, kami meneroka cabaran memilih elemen pseudo berdasarkan kesan peraturan CSS. Mari kita teroka pendekatan alternatif menggunakan pemilih jQuery.

Sifat Latar Belakang

Pertimbangkan sifat CSS lalai berikut:

.commentarea .author:before {
    background-image: url(http://...);
    background-position: -9999px -9999px;
    /* ... */
}

Sifat ini kemudiannya diubah suai secara terpilih:

.author[href$="gbacon"]:before /* ... */ {
  content: "";
  background-position: 0 -140px
}

jQuery Pemilih

Untuk memilih elemen pseudo dengan kedudukan latar belakang lalai, pemilih asas seperti ini tidak akan berfungsi:

GM_log("size = " + $(".commentarea .author:before").size());

Percubaan lain, seperti menggunakan .siblings(), juga gagal untuk menghasilkan hasil yang diingini.

Batasan Unsur Pseudo Pemilih

Adalah penting untuk ambil perhatian bahawa :before dan :after bukan pemilih jQuery yang sah. Ia mempunyai tujuan tertentu:

• :sebelum memasukkan kandungan sebelum elemen yang dipilih
• :selepas memasukkan kandungan selepas elemen yang dipilih

Contoh Penggunaan

HTML dan CSS berikut menunjukkan cara :sebelum dan :selepas kerja:

<span class="a">
    Outer
    <span class="b">
        Inner
    </span>
</span>

.a .b:before {
    content: "|Inserted using :before|";
}

.a {
    color: blue;
}

.b {
    color: red;
}

Dalam contoh ini, teks ditambahkan pada rentang dalam menggunakan :sebelumnya.

Alternatif

Sejak : sebelum bukan pemilih jQuery yang sah, pendekatan alternatif diperlukan. Satu pilihan ialah menggunakan pemalam jQuery luaran seperti jQueryRule untuk mengekstrak peraturan asal.

Sila ambil perhatian bahawa mengakses sifat gaya elemen pseudo dengan jQuery boleh mencabar. Pertimbangkan dengan teliti sama ada terdapat pendekatan alternatif yang mungkin memenuhi keperluan anda dengan lebih berkesan.

Atas ialah kandungan terperinci Bolehkah jQuery Pilih CSS Pseudo-elemen Seperti :sebelum dan :selepas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!