Bagaimana untuk melumpuhkan pemilihan dalam css

CSS ialah bahagian penting dalam pembangunan bahagian hadapan. Reka bentuknya boleh menjadikan tapak web lebih cantik dan mudah digunakan. Dalam CSS, terdapat banyak ciri menarik, salah satunya ialah spesifikasi CSS boleh menghalang pengguna daripada memilih teks elemen tertentu.

Bagaimanakah ciri ini dilaksanakan? Dalam CSS, kita boleh menggunakan atribut "pilihan pengguna" untuk menentukan sama ada pengguna dibenarkan memilih teks elemen. Atribut ini mempunyai tiga nilai yang boleh ditetapkan:

1. auto (nilai lalai): Pengguna boleh memilih teks elemen.
2. tiada: Pengguna tidak boleh memilih teks elemen.
3. teks: Pengguna hanya boleh memilih teks dalam elemen.

Mari kita lihat cara melaksanakannya:

Apabila kita ingin menghalang pengguna daripada memilih teks pada keseluruhan halaman, kita boleh menulis CSS seperti ini:

html {
  -webkit-user-select: none; /* webkit浏览器 */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  user-select: none; /* 标准语法 */
}

Di atas Atribut "pilih pengguna" digunakan dalam kod untuk melumpuhkan pemilihan teks pada keseluruhan halaman. Baris kod ini akan menjadikan pemilihan teks tidak tersedia untuk semua elemen pada keseluruhan halaman HTML dan akan berfungsi merentas pelayar yang berbeza.

Apabila kami perlu melumpuhkan pemilihan teks untuk elemen tertentu, kami boleh menulis CSS seperti ini:

p.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Dalam kod di atas, kami menggunakan kelas "no-select" untuk menentukan perenggan tidak boleh dipilih. Apabila kita perlu melarang pemilihan teks dalam elemen tertentu, kita hanya perlu menambah nama kelas dalam teg HTML:

<p class="no-select">这是一段不能被选择的文本。</p>

Selain melarang pengguna memilih teks unsur tertentu, kita juga boleh menggunakan Atribut "pilihan pengguna" membolehkan pengguna memilih hanya teks di dalamnya. Ini menghalang pengguna daripada memilih teks dalam elemen lain. Berikut ialah contoh:

div.selected {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

Dalam kod di atas, kami menggunakan kelas "dipilih" untuk mentakrifkan div di mana hanya teks di dalamnya boleh dipilih. Apabila kita perlu melaksanakan sekatan ini, kita boleh menambah nama kelas dalam teg HTML.

Untuk meringkaskan, atribut "pilihan pengguna" CSS boleh melumpuhkan pemilihan, mengehadkan pemilihan dan mengawal kandungan pemilihan dengan mudah. Kami boleh menggunakannya untuk meningkatkan kebolehgunaan dan estetika halaman. Semoga artikel ini bermanfaat kepada semua.

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan pemilihan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!