Panduan Harta Pemilih Jarak CSS: + dan ~-tutorial css-php.cn

Panduan Harta Pemilih Jarak CSS: + dan ~

PHPz

Lepaskan： 2023-10-20 18:24:20

asal

926 orang telah melayarinya

CSS 邻近选择器属性指南：+ 和 ~

Panduan sifat pemilih kedekatan CSS: + dan ~

Pemilih kedekatan CSS ialah sifat yang digunakan untuk memilih elemen bersebelahan, Ini termasuk + dan ~ .

+Pemilih digunakan untuk memilih elemen bersebelahan pertama sejurus selepas elemen yang ditentukan. Dalam struktur HTML, dua elemen adik-beradik daripada elemen induk yang sama dipanggil elemen bersebelahan.

~Pemilih digunakan untuk memilih semua elemen bersebelahan selepas elemen yang ditentukan.

Gunakan sifat pemilih jarak ini untuk mengawal penggayaan antara elemen halaman secara fleksibel. Di bawah ini kami akan menunjukkan penggunaan pemilih + dan ~ melalui contoh kod tertentu.

Pertama, kami akan mencipta dokumen HTML ringkas yang mengandungi satu siri <div> elemen bersebelahan:

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            background-color: gray;
        }
        .box:hover {
            background-color: red;
        }
        .box + .box {
            background-color: blue;
        }
        .box ~ .box {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mula-mula menentukan kelas CSS bernama kotak , yang mentakrifkan lebar, tinggi, jidar bawah dan warna latar belakang elemen div. Apabila tetikus melayang di atas elemen kotak, kami juga mentakrifkan :hover pseudo-class, yang digunakan untuk menukar warna latar belakang kepada merah.

Seterusnya, kami menggunakan pemilih + untuk menentukan warna latar belakang elemen bersebelahan pertama sebagai biru. Ini bermakna warna latar belakang elemen kotak kedua selepas elemen kotak pertama akan menjadi biru.

Kemudian, kami menggunakan pemilih ~ untuk menentukan warna latar belakang semua elemen bersebelahan selepas elemen kotak pertama menjadi hijau. Ini bermakna warna latar belakang elemen kotak kedua, ketiga dan keempat selepas elemen kotak pertama semuanya akan bertukar kepada hijau.

Simpan dan jalankan kod di atas, kami akan melihat bahawa elemen kotak dalam halaman dipaparkan mengikut gaya yang kami tetapkan. Apabila tetikus melayang di atas elemen kotak, warna latar belakangnya akan bertukar kepada merah. Warna latar belakang elemen kotak kedua sejurus selepas elemen kotak pertama akan bertukar kepada biru, manakala warna latar belakang elemen kotak lain akan bertukar kepada hijau.

Ini ialah contoh penggunaan asas menggunakan atribut pemilih kehampiran + dan ~. Anda boleh menggunakannya secara fleksibel mengikut keperluan khusus dan struktur halaman untuk mencapai kesan dan reka letak yang lebih pelbagai.

Untuk meringkaskan, sifat pemilih kedekatan CSS menyediakan cara yang mudah untuk memilih dan menggayakan elemen HTML bersebelahan. Dengan menggunakan + pemilih, kita boleh memilih elemen bersebelahan pertama sejurus selepas elemen yang ditentukan dengan menggunakan pemilih ~, kita boleh memilih semua elemen bersebelahan selepas elemen yang ditentukan. Sifat pemilih ini memberikan kawalan yang lebih halus, membolehkan kami mencipta reka letak halaman yang lebih kompleks dan kaya serta kesan penggayaan.

Saya harap artikel ini akan membantu anda memahami dan menggunakan sifat pemilih jarak CSS. Jika anda mempunyai sebarang pertanyaan, sila tinggalkan mesej untuk berbincang!

Atas ialah kandungan terperinci Panduan Harta Pemilih Jarak CSS: + dan ~. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!