Ingin menyesuaikan gaya teks yang dipilih oleh pengguna di laman web? Ia boleh dilaksanakan melalui :: Pseudo-elemen CSS. :: Pemilihan membolehkan menetapkan beberapa sifat seperti warna latar belakang, warna fon, dan lain -lain teks yang dipilih, tetapi tidak menyokong sempadan atau latar belakang kecerunan. Apabila digunakan, anda boleh terus memohon kepada tag atau kelas tertentu, seperti p :: pemilihan atau .highlight :: pemilihan. Untuk memastikan keserasian, adalah disyorkan untuk menambah awalan -webkit- untuk memenuhi lebih banyak peranti. Di samping itu, pemilih yang berbeza boleh digunakan untuk menetapkan kesan pemilihan yang berbeza untuk pelbagai elemen untuk meningkatkan estetika keseluruhan halaman dan pengalaman pengguna.

Ingin menukar warna teks di laman web? Secara lalai, penyemak imbas akan menyerlahkan teks yang dipilih pengguna dengan warna yang ditetapkan oleh sistem, tetapi melalui Pseudo-elemen CSS ::selection CSS, anda boleh menyesuaikan bahagian gaya ini.

Apa itu ::selection ?

::selection adalah elemen pseudo CSS yang membolehkan anda menetapkan gaya khusus untuk teks yang dipilih oleh pengguna di laman web. Sebagai contoh, ubah warna latar belakang, warna fon, atau bahkan berani atau laraskan saiz fon.

Harus diingat bahawa elemen pseudo ini hanya menyokong sebahagian daripada atribut CSS:

• color
• background-color
• cursor
• caret-color
• outline dan beberapa sifat berkaitan teks (seperti text-shadow juga disokong dalam beberapa pelayar)
  Lain -lain seperti sempadan dan latar belakang kecerunan tidak mungkin.

Bagaimana cara menggunakan ::selection ?

Sintaks asas sangat mudah. Tambah sahaja ::selection kepada pemilih:

 p :: pemilihan {
  latar belakang warna: #FF9900;
  Warna: #ffff;
}

Kod di atas akan membuat teks yang dipilih dalam perenggan bertukar oren dan fon putih.

Jika anda ingin memohon gaya pemilihan bersatu ke teks keseluruhan halaman, anda boleh menggunakan ::selection dengan pemilih Wildcard:

 *:: pemilihan {
  latar belakang warna: lightblue;
  Warna: DarkBlue;
}

Walau bagaimanapun, sedar bahawa ini akan menjejaskan semua elemen, termasuk kandungan dalam butang dan kotak input, dan boleh menyebabkan beberapa kesan yang tidak dijangka.

Bagaimana menangani masalah keserasian?

Walaupun penyemak imbas moden arus perdana ::selection , lebih baik untuk menambah -webkit- awalan secara bertulis, terutamanya pada pelayar mudah alih untuk lebih selamat:

 p :: pemilihan {
  latar belakang warna: #FF9900;
  Warna: #ffff;
}

P ::-WebKit-Selection {
  latar belakang warna: #FF9900;
  Warna: #ffff;
}

Walaupun kebanyakan pelayar tidak lagi memerlukan awalan, versi -webkit- masih boleh meliputi lebih banyak peranti, terutama pelayar iOS yang lebih tua.

Bolehkah ia ditetapkan mengikut unsur -unsur yang berbeza?

pasti. Anda boleh menetapkan gaya terpilih yang berbeza mengikut tag, nama kelas dan juga status:

 .highlight :: pemilihan {
  latar belakang warna: kuning;
  Warna: Hitam;
}

.code-block :: pemilihan {
  latar belakang warna: #333;
  Warna: #0F0;
}

Dengan cara ini, unsur-unsur dengan kelas .highlight dipilih dengan aksara hitam pada latar belakang kuning, manakala .code-block adalah latar belakang kelabu gelap dengan teks hijau terang, yang menjadikan perbezaan visual jelas dan lebih seperti reka bentuk.

Pada dasarnya itu sahaja. Menggunakan ::selection bukan sahaja boleh menjadikan gaya web lebih bersatu, tetapi juga meningkatkan pengalaman membaca pengguna. Ia adalah perubahan kecil tetapi kesan yang baik.

Atas ialah kandungan terperinci Bagaimana cara menukar warna pemilihan teks pada laman web menggunakan :: Pseudo-Element dengan pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!