So deaktivieren Sie die Auswahl in CSS

CSS ist ein wichtiger Bestandteil der Frontend-Entwicklung und kann die Website schöner und benutzerfreundlicher machen. In CSS gibt es viele interessante Funktionen. Eine davon besteht darin, dass die CSS-Spezifikation den Benutzer daran hindern kann, den Text eines bestimmten Elements auszuwählen.

Wie wird diese Funktion implementiert? In CSS können wir das „user-select“-Attribut verwenden, um zu definieren, ob der Benutzer den Text eines Elements auswählen darf. Dieses Attribut verfügt über drei Werte, die festgelegt werden können:

1. auto (Standardwert): Der Benutzer kann den Text des Elements auswählen.
2. none: Der Benutzer kann den Text des Elements nicht auswählen.
3. Text: Benutzer können nur Text innerhalb des Elements auswählen.

Schauen wir uns an, wie man es implementiert:

Wenn wir Benutzern verbieten möchten, den Text der gesamten Seite auszuwählen, können wir CSS wie folgt schreiben:

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

Das Attribut „user-select“ wird in verwendet Der obige Code verhindert die Auswahl des gesamten Textes. Diese Codezeile macht die Textauswahl für alle Elemente auf der gesamten HTML-Seite nicht verfügbar und funktioniert in verschiedenen Browsern.

Wenn wir die Textauswahl für ein bestimmtes Element deaktivieren müssen, können wir CSS wie folgt schreiben:

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

Im obigen Code verwenden wir die Klasse „no-select“, um nicht auswählbare Absätze zu definieren. Wenn wir die Auswahl von Text in einem bestimmten Element verbieten müssen, müssen wir nur den Klassennamen im HTML-Tag hinzufügen:

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

Zusätzlich zum Verbot für Benutzer, den Text eines bestimmten Elements auszuwählen, können wir auch das „ „user-select“-Attribut, damit der Benutzer nur den darin enthaltenen Text auswählen kann. Dadurch wird verhindert, dass Benutzer Text in anderen Elementen auswählen. Hier ist ein Beispiel:

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

Im obigen Code verwenden wir die Klasse „selected“, um ein Div zu definieren, in dem nur der darin enthaltene Text ausgewählt werden kann. Wenn wir diese Einschränkung implementieren müssen, können wir den Klassennamen im HTML-Tag hinzufügen.

Zusammenfassend lässt sich sagen, dass das CSS-Attribut „Benutzerauswahl“ die Auswahl bequem deaktivieren, die Auswahl einschränken und den Auswahlinhalt steuern kann. Wir können damit die Benutzerfreundlichkeit und Ästhetik der Seite verbessern. Ich hoffe, dieser Artikel ist für alle hilfreich.

Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie die Auswahl in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!