Verwendung des Fokus-innerhalb-Selektors von CSS3

Pseudoelemente und Pseudoklassen

Apropos, schauen wir uns zuerst die Pseudoklassenselektoren und Pseudoelementselektoren an. Ältere Browser haben nicht streng zwischen den folgenden beiden Schreibmethoden unterschieden.

a:nach{}
a::nach{}

Im neuen Standard wird für CSS3-Pseudoklassen der einfache Doppelpunkt (:) und für CSS3-Pseudoelemente der doppelte Doppelpunkt (::) verwendet. Darauf können wir bei der Entwicklung achten. Natürlich können die meisten Browser beide Schreibweisen erkennen.

Gemeinsame Pseudoelemente und Pseudoklassen

Pseudoklassen

:Link, :besucht, :hover, :aktiv, :Fokus, :erstes Kind, :letztes Kind, :n-tes Kind, :n-tes-letztes-Kind, :nicht()

Pseudoklassen werden im Allgemeinen für einen bestimmten Zustand eines Elements verwendet, z. B. Mouseover, Klicken auf eine Schaltfläche, besuchter Link, Fokus im Eingabefeld usw. Sie werden auch verwendet, um ein spezielles Element auszuwählen, z. B. das erste, letzte, gerade, ungerade usw. von mehreren Elementen. Seine Funktion besteht darin, einem Element, das die oben genannten Bedingungen erfüllt, einige Stile hinzuzufügen.

ein:schweben{
        Textdekoration: Unterstreichen;
    }
a:aktiv {
    Farbe: blau;
}
ein:link {
    Farbe: rot;
}
a:besucht {
    Farbe: grün;
}

Das obige Beispiel zeigt die verschiedenen Darstellungen eines a Tags in verschiedenen Zuständen. Vor dem Anklicken des Links ist der a Tag in roter Schrift (Link). Wenn die Maus über den a Tag fährt, wird a Tag unterstrichen (Hover). Beim Drücken der Maus wird der a Tag blau (aktiv). Nach dem Anklicken wird der a Tag grün (besucht). Wie Sie sehen, besteht der Zweck von Pseudoklassen darin, Tags in verschiedenen Zuständen Stile hinzuzufügen.

Pseudoelemente

::erster Buchstabe, ::erste Zeile, ::vorher, ::nachher

Wie im Inhaltsmodul erwähnt, sind Pseudoelemente nutzlos, wenn das Attribut „content“ nicht festgelegt ist. Über Pseudoelemente eingefügte Inhalte sind nicht im Quelltext der Seite sichtbar, sondern lediglich im CSS. Eingefügte Elemente sind standardmäßig Inline-Elemente (oder in HTML5 in der semantischen Textklasse). Um einem eingefügten Element Höhe, Abstand, Ränder usw. zuzuweisen, müssen Sie es daher normalerweise explizit als Blockelement definieren. Beachten Sie auch, dass für eingefügte Elemente die typischen CSS-Vererbungsregeln gelten. Wenn Sie beispielsweise die Schriftfamilie Helvetica, Arial, Sans Serif auf das Body-Element angewendet haben, erbt das Pseudoelement diese Schriftfamilie wie jedes andere Element. Pseudoelemente erben nicht automatisch Stile von ihrem übergeordneten Element (wie etwa Polsterränder). Ihrer Intuition nach könnten die Pseudoelemente :before und :after bedeuten, dass der eingefügte Inhalt vor oder nach dem Zielelement eingefügt wird. Dies ist nicht der Fall. Der eingefügte Inhalt ist ein untergeordnetes Element des zugehörigen Zielelements, wird jedoch „vor“ oder „nach“ dem Inhalt dieses Elements platziert.

<Kopf>
    <style type="text/css">
        p.box::vor {
          Inhalt: "#";
          Rand: durchgehend 1 Pixel schwarz;
          Polsterung: 2px;
          Rand: 0 10px 0 0;
        }
        p.box::nach {
          Inhalt: "#";
          Rand: durchgehend 1 Pixel schwarz;
          Polsterung: 2px;
          Rand: 0 10px 0 0;
        }
    </Stil>
</Kopf>
<Text>
<p class="box">Andere Inhalte.</p>
</body>

Wirkung der Operation:

Wie Sie sehen, haben wir im html Teil nur ein Element geschrieben, aber wir haben Pseudoelemente verwendet, um drei Teile darzustellen: vorne, Mitte und hinten. Hier können wir davon ausgehen, dass Pseudoelemente im Allgemeinen zur Unterstützung html Elementen verwendet werden. Der Quellcode der Inhaltsseite ist jedoch nicht sichtbar. Viele magische Funktionen können durch die Verwendung von Pseudoelementen erreicht werden. Ich werde sie hier nicht im Detail erklären und später ein spezielles Tutorial veröffentlichen.

Magische Pseudoklasse: Fokus innerhalb

Kommen wir zurück zum Thema und kehren zu unserem Protagonisten focus-within zurück. Wir wissen, dass sich die Pseudoklasse focus auf das Hinzufügen von Stilen zu einem Element bezieht, wenn es den Fokus bekommt. focus-within hat einen größeren Umfang. Es bedeutet, dass ein Element oder ein untergeordnetes Element dieses Elements den Fokus hat. Markieren Sie den Punkt, und er oder seine Unterpunkte werden in den Fokus gerückt. Dies bedeutet, dass :focus-within ausgelöst werden kann, wenn es oder seine Nachkommen den Fokus erhalten.

Diese Eigenschaft ähnelt ein wenig dem Ereignisbubbling von Javascript . Es beginnt beim fokussierbaren Element und bubblingt zum Stammelement html , das das Ereignis „Trigger :focus-within “ empfangen kann, ähnlich dem folgenden einfachen Beispiel:

<html>
 <div Klasse="Box g-Vater">
        <div Klasse="Box g-Kinder">
            <div Klasse="Box-Schaltfläche" tabindex="1">Schaltfläche</div>
        </div>
  </div>
  <div class="g-body">HTML</div>
  <Stil>
    div {
      Box-Größe: Rahmenbox;
    }
    .button,.g-children {
        Breite: 100 %;
        Höhe: 100%;
        Polsterung: 20px;
        Rand: 1px durchgezogen;
    }
    .g-Vater {
        Breite: 200px;
        Höhe: 200px;
        Polsterung: 20px;
        Rand: 1px durchgezogen;
    }
    .g-body {
        Rand oben: 20px;
        Breite: 200px;
        Rand: 1px durchgezogen;
    }
    .g-body:Fokus-innerhalb {
        Hintergrundfarbe: #5daf34;
    }
    .g-father:Fokus-innerhalb {
        Hintergrundfarbe: #3a8ee6;
    }
    .g-children:Fokus-innerhalb{
        Hintergrundfarbe: #2c3e50;
    }
    .button:Fokus-innerhalb {
        Hintergrundfarbe: #606266;
        Farbe: rot;
    }
        </Stil>
</html>

Laufergebnisse:

Sie können sehen, dass, wenn button durch Aufsteigen den Fokus erhält, alle ihre übergeordneten Elemente den Stil :focus-within anwenden. Es ist hier anzumerken, dass ein normales div den Fokus nicht erhalten kann. Es kann den Fokus nur erhalten, indem es das Tabindex-Attribut setzt. Gleichzeitig kann es auch durch Drücken der Tabulatortaste auf der Tastatur den Fokus erhalten. Je kleiner der Tabindex-Wert ist, desto mehr wird es zuerst fokussiert, wenn die Tabulatortaste umgeschaltet wird. Gemäß den Eigenschaften von :focus-within können wir viele praktische Funktionen ohne Verwendung von js implementieren.

Fokusbereich des Benutzers erfassen

Durch die Verwendung von focus-within kann der Wahrnehmungsbereich des Benutzers vergrößert werden und ihm ein besseres visuelles Feedback gegeben werden.

<html>
 <div Klasse="g-container">
      <input type="text" placeholder="Benutzername" class="g_input" >
      <Eingabetyp="Text" Platzhalter="Code" Klasse="g_input" >
  </div>
  <Stil>
    .g-container {
        Rand oben: 10vh;
    }
    .g-container {
        Polsterung: 10px;
        Breite: 30vw;
        Rand: 1px durchgezogen #eee;
        Übergang: alle 0,3 s;
        Textausrichtung: zentriert;
    }
    .g-container:Fokus-innerhalb {
        transformieren: übersetzenY(-4px);
        Kastenschatten: 0 0 10px #ddd;
        Rahmenfarbe: hsl (199, 98 %, 48 %);
    }
    .g_input {
        Rand: keiner;
        Breite: 20vw;
        Polsterung: 15px;
        Schriftgröße: 18px;
        Box-Größe: Rahmenbox;
        Rand: 1px durchgezogen #ddd;
        Überlauf: versteckt;
        Übergang: 0,3 s;
        Kastenschatten: 0 0 0px #ddd;
        &:Fokus {
            Kastenschatten: 0 0 10px #ddd;
            Rahmenfarbe: hsl (199, 98 %, 48 %);
        }
    }
    </Stil>
</html> 

Sie können sehen, dass der obige Effekt ohne javascript Logiksteuerung durch die Verwendung von focus-within erzielt werden kann.

Off-Screen-Navigation implementieren

Schauen wir uns zunächst die Wirkung an:

Es ist ersichtlich, dass dies ein großartiger Navigationseffekt ist und die gesamte Implementierung keine javascript Steuerung verwendet, was zweifellos die Leistung und das Erlebnis erheblich verbessert. Den genauen Quellcode finden Sie unter folgender Adresse: Adresse

Implementieren Sie das Umschalten der Anmeldeanimation für Websites wie B Station und Nuggets

Uns ist vielleicht aufgefallen, dass Benutzer, die ihre Passwörter bei Bilibili und Nuggets eingeben, auf den Bildern oben ihre Augen bedecken. Wir können hier auch focus-within verwenden, um dies zu erreichen.

<html>
 <div Klasse="g-wrap"></div>
        <div Klasse="g-container">
            <h2>Anmelden</h2>
            <div Klasse="g-Benutzername">
                <input maxlength="64" placeholder="Bitte geben Sie Ihre Telefonnummer oder E-Mail-Adresse ein" class="input">
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png" class="g-username">
            </div>
            <div Klasse="g-Passwort">
                <input type="password" maxlength="64" placeholder="Bitte geben Sie Ihr Passwort ein" class="input">
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png" class="g-password">
            </div>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png" class="g-normal">
    </div>
<Stil>
.g-wrap {
  Position: fest;
  oben: 0;
  links: 0;
  unten: 0;
  rechts: 0;
  Hintergrund: rgba(0, 0, 0, 0,3);
}

.g-container {
  Position: relativ;
  Breite: 318px;
  Rand: 100px automatisch;
  Höhe: 370px;
  Polsterung: 20px;
  Box-Größe: Rahmenbox;
  Hintergrund: #fff;
  Z-Index: 10;
}
.g-container h2 {
  Schriftgröße: 20px;
  Schriftstärke: fett;
  Rand unten: 30px;
}
.g-container Eingabe {
  Gliederung: keine;
  Polsterung: 10px;
  Breite: 100 %;
  Rand: 1px durchgezogen #e9e9e9;
  Rahmenradius: 2px;
  Gliederung: keine;
  Box-Größe: Rahmenbox;
  Schriftgröße: 16px;
}

img {
  Position: absolut;
  oben: -20%;
  links: 50%;
  Breite: 120px;
  Höhe: 95px;
  transformieren: übersetzen(-50 %, 0);
}

.g-Benutzername {
  Rand unten: 10px;
}
.g-Benutzername img {
  Anzeige: keine;
  Breite: 120px;
  Höhe: 113px;
}

.g-Benutzername:Fokus-innerhalb ~ img {
  Anzeige: keine;
}

.g-Benutzername:Fokus innerhalb der Eingabe {
  Rahmenfarbe: #007fff;
}
.g-Benutzername:Fokus-innerhalb von img {
  Anzeige: Block;
}

.g-passwort {
  Rand unten: 10px;
}
.g-password img {
  Anzeige: keine;
  Breite: 103px;
  Höhe: 84px;
  oben: -15%;
}

.g-password:Fokus-innerhalb ~ img {
  Anzeige: keine;
}

.g-password:Fokus innerhalb der Eingabe {
  Rahmenfarbe: #007fff;
}
.g-password:Fokus-innerhalb von img {
  Anzeige: Block;
}
</Stil>
</html>

Es ist ersichtlich, dass der Effekt des dynamischen Umschaltens von Bildern auch ohne die Verwendung js erreicht werden kann, es gibt jedoch immer noch einige Einschränkungen: Die dom Anordnung kann nur übergeordnet sein und das Element kann nicht im untergeordneten Element focus Fokuselements platziert werden. Es ist also nicht so flexibel wie js , enthält aber weniger Code.

Fokus-innerhalb-Kompatibilität

Da es mit den neuen Features von CSS3 immer wieder Kompatibilitätsprobleme gab, habe ich hier die Kompatibilität überprüft und festgestellt, dass der rote Bereich nicht zu düster ist. Abgesehen vom IE unterstützen es grundsätzlich auch andere Browser.

Alle Quellcodes finden Sie in meinem Repository:

Dies ist das Ende dieses Artikels über die Verwendung des Fokus-innerhalb-Selektors von CSS3. Weitere Informationen zum Fokus-innerhalb-Selektor von CSS3 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!