Detaillierte Erläuterung der Verwendung von User-Select in CSS3

Detaillierte Erläuterung der Verwendung von User-Select in CSS3

Das User-Select-Attribut ist ein neues Attribut in CSS3, mit dem festgelegt wird, ob der Benutzer Text auswählen kann. Es kann für alle Elemente außer Ersatzelementen verwendet werden. Im Folgenden finden Sie eine Beschreibung der Hauptverwendung und Vorsichtsmaßnahmen für die Benutzerauswahl. Weitere Informationen finden Sie in der folgenden CSS3-Dokumentbeschreibung.

(1) Syntax

Benutzerauswahl:keine |. element

Standardwert :Text

Anwendbarer Geltungsbereich:Alle Elemente außer Ersatzelementen

(2) Wertbeschreibung

keine:Text kann nicht ausgewählt werden

Text:Text kann ausgewählt werden

alle: Wenn alle Inhalte als Ganzes betrachtet werden kann ausgewählt werden. Wenn Sie im Kontext auf ein untergeordnetes Element doppelklicken oder darauf klicken, ist der ausgewählte Teil das höchste Vorgängerelement, das vom untergeordneten Element aus zurückverfolgt wird.

Element:Text kann ausgewählt werden, aber der Auswahlbereich ist durch die Elementgrenze eingeschränkt

(3) Browserunterstützung

Die folgende Abbildung listet die Unterstützungsebene jedes Browsers auf, wenn der Wert „none|text|all“ ist. Wenn der Wert „element“ ist, wird er von den meisten Browsern nicht unterstützt und daher nicht aufgeführt.

(4) Beschreibung

1.IE6-9 unterstützt dieses Attribut nicht, unterstützt aber Es verwendet das Tag-Attribut onselectstart="return false;", um den Effekt von user-select:none und Chrome zu erzielen dieses Tag-Attribut unterstützen; 2. Dieses Attribut wird bis

Opera12.5

nicht unterstützt, unterstützt aber wie IE6-9 auch die Verwendung von Private-Label-Attributen unselectable = „ein“ , um den Effekt von user-select:none zu erzielen; ein anderer Wert von unselectable ist aus; 3 .Außer Chrome und Safari, in anderen Browsern, wenn der Text auf

-ms-user-select:none;

eingestellt ist, Der Benutzer kann in diesem Textblock nicht mit der Textauswahl beginnen. Wenn der Benutzer jedoch mit der Auswahl von Text in einem anderen Bereich der Seite beginnt, kann er weiterhin den Bereichstext auswählen, indem er den Text auf -ms-user-select:none 4. Die entsprechende Skriptfunktion ist userSelect

(5) Beispiel

CSS-Code:

html Code:

                                                 

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

Detaillierte Erläuterung der Verwendung von User-Select in CSS3

<p class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</p>

Das User-Select-Attribut ist ein neues Attribut in CSS3, mit dem festgelegt wird, ob Der Benutzer kann Text auswählen. Es kann für alle Elemente außer Ersatzelementen verwendet werden. Im Folgenden finden Sie eine Beschreibung der Hauptverwendung und Vorsichtsmaßnahmen für die Benutzerauswahl. Weitere Informationen finden Sie in der folgenden CSS3-Dokumentbeschreibung.

Referenzlink: http://www.php.cn/

(1) Syntax

Benutzerauswahl:

none |. all |. element

Standardwert:

text

Anwendbarer Bereich:

Alle Elemente außer Ersatzelementen

(2) Wertbeschreibung

keine:

Text kann nicht ausgewählt werden

Text:

Text kann ausgewählt werden

alle:

kann ausgewählt werden, wenn alle Inhalte als Ganzes betrachtet werden. Wenn Sie im Kontext auf ein untergeordnetes Element doppelklicken oder darauf klicken, ist der ausgewählte Teil das höchste Vorgängerelement, das vom untergeordneten Element aus zurückverfolgt wird.

Element:

Text kann ausgewählt werden, aber der Auswahlbereich ist durch die Elementgrenze eingeschränkt

(3) Browserunterstützung

Die folgende Abbildung listet die Unterstützungsstufe jedes Browsers auf, wenn der Wert „none|text|all“ ist. Wenn der Wert „element“ ist, wird er von den meisten Browsern nicht unterstützt und daher nicht aufgeführt.

(4) Beschreibung

1.IE6-9

ist nicht unterstützt Dieses Attribut unterstützt die Verwendung der Tag-Attribute

onselectstart="return false;"

, um den Effekt von

user-select:none

; Safari und zu erzielen ChromeDieses Tag-Attribut wird ebenfalls unterstützt

2. Dieses Attribut wird bis Opera12.5 nicht unterstützt, unterstützt aber wie IE6-9 auch die Verwendung privater Tag-Attribute unselectable="on" um den Effekt von user-select:none zu erzielen; der andere Wert von unselectable ist

3 🎜> Zusätzlich zu Chrome und

Safari gilt: Wenn der Text in anderen Browsern auf -ms-user-select:none; eingestellt ist, wird der Benutzer dies nicht tun in der Lage sein, mit der Textauswahl innerhalb des Blocks zu beginnen. Wenn der Benutzer jedoch mit der Auswahl von Text in einem anderen Bereich der Seite beginnt, kann er weiterhin den Bereichstext auswählen, indem er den Text auf -ms-user-select:none 4. Die entsprechende Skriptfunktion ist userSelect

(5) Beispiel

CSS-Code:

html Code:

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

Ausführlichere Erläuterungen zur Verwendung von User-Select in CSS3 finden Sie auf der chinesischen PHP-Website für verwandte Artikel!

<p class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</p>