Apakah pemilih unsur pseudo?

Apakah pemilih pseudo-elemen yang diperlukan elemen pseudo untuk penggayaan. Pemilih unsur pseudo biasanya diwakili oleh dua titik bertindih (::). Dalam artikel ini, kami akan membincangkan beberapa pemilih unsur pseudo yang biasa digunakan dan memberikan contoh kod khusus.

::sebelum pemilih elemen pseudo: Pemilih ini memasukkan elemen pseudo sebelum elemen padanan.

1. Contoh kod:

<style>
    .box::before {
        content: "▲";
        display: block;
        color: red;
    }
</style>

<div class="box">
    这是一个例子
</div>

Dalam contoh ini, dengan menggunakan ::before pemilih elemen pseudo, kami memasukkan elemen pseudo sebelum elemen div dengan kelas "kotak" dan menetapkan kandungan kepada "▲", Paparan mod ialah elemen peringkat blok dan warnanya merah. Malah, kita boleh menyesuaikan kandungan, gaya dan kedudukan elemen pseudo.

::selepas pemilih elemen pseudo: Pemilih ini memasukkan elemen pseudo selepas elemen padanan.

2. Contoh kod:

<style>
    .box::after {
        content: "▼";
        display: block;
        color: blue;
    }
</style>

<div class="box">
    这是一个例子
</div>

Dalam contoh ini, dengan menggunakan ::selepas pemilih elemen pseudo, kami memasukkan elemen pseudo selepas elemen div dengan kelas "kotak" dan menetapkan kandungan kepada "▼", Paparan mod ialah elemen peringkat blok dan warna biru. Kami juga boleh melaraskan gaya unsur pseudo secara bebas.

::pemilih unsur pseudo huruf pertama: Pemilih ini sepadan dengan huruf pertama elemen.

3. Contoh Kod:

<style>
    p::first-letter {
        font-size: 2rem;
        color: green;
    }
</style>

<p>
    这是一个例子的开头。
</p>

Dalam contoh ini, dengan menggunakan ::pemilih unsur pseudo huruf pertama, kami memadankan huruf pertama dalam elemen p dan menetapkan saiz fonnya kepada 2rem dan warna kepada hijau . Kami juga boleh menetapkan gaya lain untuk huruf pertama, seperti fon tebal, jarak huruf, dsb.

::pemilih unsur pseudo baris pertama: Pemilih ini sepadan dengan baris pertama elemen.

4. Contoh Kod:

<style>
    p::first-line {
        font-size: 1.5rem;
        color: purple;
    }
</style>

<p>
    这是一个例子的开头，这是一个例子的中间，这是一个例子的结尾。
</p>

Dalam contoh ini, dengan menggunakan ::pemilih unsur pseudo baris pertama, kami memadankan baris pertama dalam elemen p dan menetapkan saiz fonnya kepada 1.5rem dan warna kepada ungu . Kami juga boleh menetapkan gaya lain untuk baris pertama, seperti fon tebal, jarak teks, dsb.

Ringkasan:

Di atas memperkenalkan beberapa pemilih unsur pseudo yang biasa digunakan, termasuk ::sebelum, ::selepas, ::huruf pertama, ::baris pertama. Dengan bantuan pemilih unsur pseudo ini, kami boleh memasukkan elemen tersuai sebelum atau selepas kandungan elemen dan menggayakannya. Dengan menggunakan pemilih unsur pseudo secara fleksibel, kami boleh mencapai beberapa kesan hebat dan menambah beberapa ciri pada reka bentuk web. Saya harap artikel ini akan membantu anda mempelajari pemilih unsur pseudo.

Atas ialah kandungan terperinci Apakah pemilih unsur pseudo?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!