Comment désactiver la sélection en CSS

CSS est une partie importante du développement front-end. Sa conception peut rendre le site Web plus beau et plus facile à utiliser. En CSS, il existe de nombreuses fonctionnalités intéressantes, dont l'une est que la spécification CSS peut empêcher l'utilisateur de sélectionner le texte d'un élément spécifique.

Comment cette fonctionnalité est-elle implémentée ? En CSS, on peut utiliser l'attribut "user-select" pour définir si l'utilisateur est autorisé à sélectionner le texte d'un élément. Cet attribut a trois valeurs paramétrables :

1. auto (valeur par défaut) : L'utilisateur peut sélectionner le texte de l'élément.
2. aucun : L'utilisateur ne peut pas sélectionner le texte de l'élément.
3. texte : les utilisateurs ne peuvent sélectionner que du texte dans l'élément.

Voyons comment l'implémenter :

Lorsque nous voulons empêcher les utilisateurs de sélectionner le texte de la page entière, nous pouvons écrire du CSS comme ceci :

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

L'attribut "user-select" est utilisé dans le code ci-dessus pour interdire la sélection du texte entier de la page. Cette ligne de code rendra la sélection de texte indisponible pour tous les éléments de la page HTML entière et fonctionnera sur différents navigateurs.

Lorsque nous devons désactiver la sélection de texte pour un élément spécifique, nous pouvons écrire du CSS comme ceci :

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

Dans le code ci-dessus, nous utilisons la classe "no-select" pour définir des paragraphes non sélectionnables. Lorsque nous devons interdire la sélection de texte dans un élément spécifique, il suffit d'ajouter le nom de la classe dans la balise HTML :

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

En plus d'interdire aux utilisateurs de sélectionner le texte d'un certain élément, nous pouvons également utiliser le " user-select" pour permettre à l'utilisateur de sélectionner uniquement le texte qu'il contient. Cela empêche les utilisateurs de sélectionner du texte dans d'autres éléments. Voici un exemple :

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

Dans le code ci-dessus, nous utilisons la classe "selected" pour définir un div dans lequel seul le texte qu'il contient peut être sélectionné. Lorsque nous devons implémenter cette restriction, nous pouvons ajouter le nom de la classe dans la balise HTML.

Pour résumer, l'attribut "user-select" de CSS peut facilement désactiver la sélection, limiter la sélection et contrôler le contenu de la sélection. Nous pouvons l'utiliser pour améliorer la convivialité et l'esthétique de la page. J'espère que cet article sera utile à tout le monde.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!