Was sind CSS3-Selektoren: Lese-/Schreibzugriff und :schreibgeschützt? Wie benutzt man?

Der Inhalt dieses Artikels besteht darin, Ihnen die CSS3-Selektoren vorzustellen: Lesen/Schreiben und: Nur Lesen? Lassen Sie alle wissen, was der :read-write-Selektor und der :read-only-Selektor von CSS3 sind, was sie tun und wie sie verwendet werden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

css3 :read-write

:read-write ist ein Pseudoklassenselektor in CSS, der verwendet wird, um vom Benutzer bearbeitbare, also lesbare Elemente abzugleichen und beschreibbare Elemente.

Elemente , die zur bearbeitbaren Kategorie gehören, umfassen:

1. , die nicht schreibgeschützt und nicht deaktiviert sind . Das bedeutet, dass für sie weder das Attribut „readonly“ noch das „disabled“ festgelegt ist.

2. Ein -Element, das weder schreibgeschützt noch deaktiviert ist (ähnlich der Eingabe).

3. Jedes andere Element, das nicht ist, aber über das Attribut contenteditable verfügt.

Hinweis: Derzeit kann der :read-write-Selektor in den meisten Browsern nur zum Festlegen von Eingabe- und Textbereichselementen verwendet werden.

css3 :read-only

:read-only ist auch ein Pseudoklassenselektor in CSS, der alles abgleicht, was nicht mit dem Selektorelement :read-write übereinstimmt .

Mit anderen Worten, der :read-only-Pseudoklassenselektor stimmt mit Elementen überein, die vom Benutzer nicht bearbeitet werden können, d. Zum Beispiel: Elemente mit Attributen wie „readonly“ oder „disabled set“. Im Folgenden sind Beispiele für Elemente aufgeführt, die mit „read-write“ abgeglichen werden können:

< input  type = “text” >
< input  type = “number” >
< textarea  name = “nm”  id = “id”  cols = “30”  rows = “10” >  </ textarea >
< div  class = “random”  contenteditable >  </ div >

Im Folgenden sind Beispiele für Elemente aufgeführt, die mit „read-write“ nicht abgeglichen werden können, also Beispiele von Elemente, die abgeglichen werden können mit: schreibgeschützt :

< input  type = “text”  disabled >
< input  type = “number”  disabled >
< input  type = “number”  readonly >
< textarea  name = “nm”  id = “id”  cols = “30”  rows = “10”  readonly >  </ textarea >
< div  class = “random” >  </ div >  <！ - 无法使用contenteditable编辑的常规元素 - >

Obwohl dies das von der Spezifikation empfohlene Verhalten ist, scheint das Browserverhalten zu variieren: Es kann sein, dass das, was in einem Browser als Lesen und Schreiben betrachtet wird, auch so ist gelten als in einem anderen Browser gelesen und geschrieben. Schreibgeschützt, daher funktioniert der von uns verwendete :read-write-Stil möglicherweise nicht mit einigen Browsern.

Genau wie andere Pseudoselektoren können sowohl der :read-write-Selektor als auch der :read-only-Selektor mit anderen Selektoren wie :hover und dem Pseudoelement ::after verkettet werden.

Zum Beispiel formatiert :read-write+:focus den bearbeitbaren Textbereich:

textarea:read-write:focus {
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
}

textarea:read-write:before {
    content: "Type here...";
    color: #aaa;
}

Zum Beispiel formatiert :read-only + :hover das Div (normal) auf der Seite:

div:read-only:hover {
    background-color: #eee;
}

div:read-only:before {
    content: "?";
    color: deepPink;
}

Browserunterstützung

Die Zahl in der Tabelle gibt die erste Browserversionsnummer an, die dieses Attribut unterstützt.

Verwenden Sie im Firefox-Browser das Präfix: -moz-read-write, -moz-read-only; der Lese-/Schreibselektor und der Nur-Lese-Selektor werden bei der Verwendung von Internet Explorer und Android nicht unterstützt.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Empfohlene verwandte Video-Tutorials:

CSS3-Tutorial

!

Das obige ist der detaillierte Inhalt vonWas sind CSS3-Selektoren: Lese-/Schreibzugriff und :schreibgeschützt? Wie benutzt man?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!