ATOZ CSS Screencast: CSS -Pseudoelemente

Kernpunkte

• CSS-Pseudoelemente sind Elemente auf der Seite, die nicht im HTML-Code vorhanden sind, und können mit einem beliebigen CSS-Stil betrieben werden, der auf andere Elemente angewendet wird.
Die
• und :before Pseudo-Elemente in :after CSS können verwendet werden, um Seiteninhalt zu generieren, einschließlich Text, Bilder, Attributwerten und Zähler. Sie können auch verwendet werden, um komplexe Formen mit minimaler Markierung zu erzeugen.
• Die verschiedenen Pseudoelemente in CSS umfassen :first-line, :first-letter, :selection, :before, :after und
. Diese können verwendet werden, um bestimmte Teile eines Elements zu stylen, den Inhalt vor und nach dem Inhalt eines Elements einzufügen und den ersten Buchstaben oder die erste Zeile eines Elements auf Blockebene usw. zu stylen.

Video Erklärung

(Laden im Player ...) Dieses Video ist Teil der ATOZ CSS -Serie. Hier finden Sie andere Inhalte in der Serie.

Textdatensatz

Das CSS-Pseudoelement ist ein Element auf der Seite, das nicht im HTML-Code angezeigt wird.

Sie können mit jedem CSS -Stil betrieben werden, der auf jedes andere Element angewendet wird.

:before Zwei spezielle Pseudo-Elemente-:after und

-können verwendet werden, um Seiteninhalte aus CSS zu generieren und viele potenzielle Anwendungsfälle zu haben.

In diesem Abschnitt werden wir lernen:

fünf verschiedene Pseudo-Elemente
Text, Bildattributwerte und Zähler aus CSS
• Generieren
So erstellen Sie komplexe Formen mit minimalem Markup

pseudo-element

Es gibt fünf Pseudoelemente in CSS:

• :first-line
• :first-letter
• :selection
• :before
• :after

Diese werden von Doppelkolons von Pseudoklassen unterschieden, aber zum Einfachheit halber werden sie normalerweise unter Verwendung von Einzelkolons in CSS geschrieben.

:first-line Hier ist ein langer Hinweis auf den Platzhaltertextblock. Ich kann die Farbe der ersten Zeile des Textes mit :first-letter ändern, die auch nach der Reform des Textes gilt. Ich kann einen anfänglichen Caps -Effekt erstellen, indem ich den Stil von :selection mit schwimmenden und größeren Schriftgrößen festlegt. Ich kann auch die Farbe des ausgewählten Textes mit

ändern.

:before Ich kann die :after und content Pseudo-Elemente verwenden, um große Anführungszeichen vor und nach der Blockreferenz hinzuzufügen. Der Text wird aus dem Attribut

generiert, und dann können Sie CSS -Stile verwenden, um den gewünschten Effekt zu erzielen.

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

Inhalt erstellen

:before Verwenden von :after und

Pseudo-Elementen können wir der Seite verschiedene Inhalte hinzufügen.

Wir haben gesehen, wie man der Seite Textinhalte hinzufügt, aber wir können auch Bilder, Attributwerte, Zähler oder leere Zeichenfolgen hinzufügen und einfach auf diese beiden zusätzlichen Elemente zugreifen.

Hinzufügen eines Bildes ähnelt dem Hinzufügen eines Hintergrundbildes mit url(). Verwenden Sie hier url() als Wert des content -attributs. Ich bevorzuge tatsächlich Hintergrundbilder und greife auf das Pseudoelement zu, indem ich eine leere Zeichenfolge für content erstelle. Dies bietet mehr Kontrolle über das Bild, da alle häufig verwendeten Eigenschaften wie background-position, background-repeat und background-size verfügbar sind.

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

Sie können auch das Attribut content verwenden, um den Wert des HTML -Attributs in die Seite zu injizieren. Beim Erstellen eines Druckstylesheetes füge ich gerne das folgende Code -Snippet hinzu, um die URL des Links auszuführen, damit sie auf der Seite gelesen werden können:

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

Dies fügt Links nach dem Link -Text für einen Link hinzu, der kein interner Link oder Hash -Link ist.

Der letzte Sonderfall der Generierung von Inhalten ist der Wert der Insertion -Zählervariable. Ich habe festgestellt, dass dies sehr nützlich ist, um komplexe Listen der rechtlichen Geschäftsbedingungen zu nummerieren.

Hier finden Sie eine Reihe von Titeln und unten eine Reihe von verschachtelten Listen. Ich möchte, dass jeder Kapitel -Titel eine Nummer hat und jedes Listenelement eine untergeordnete Nummer für jedes Kapitel ist.

Für jedes h2 werde ich einen "Abschnitt" -Tisch inkrementieren. Vor jedem Kapitel -Titel werde ich den Wert des Kapitelszählers ausgeben. Es können zusätzliche Zeichenfolgen zwischen den Zählern hinzugefügt werden, um komplexe Nummerierungssysteme zu erstellen. Die vereinfachte Form dieser Methode kann verwendet werden, um den Stil von Zahlen oder Kugeln in einer Liste zu steuern.

a[href]:not([href*="#"]):after {
  content: attr(href);
}

Form

Da jedes Element auf der Seite zwei "zusätzliche" Elemente haben kann und nach unseren Vorlieben gestylt werden kann, können verschiedene komplexe Formen erstellt werden.

Während ich über das Demo-Beispiel nachdachte, habe ich einen Hinweis auf die Form von CSS-Tricks gesehen. Lassen Sie uns Yin- und Yang -Symbole mit einem einzigen Element machen.

h2 {counter-increment: section;}
ul {counter-reset: item;}
li {counter-increment: item;}

h2:before {
  content: counter(section) " - ";
}
li:before {
  content: counter(section) "." counter(item);
}

Beginnend mit der Box können Sie border-radius verwenden, um es in einen Kreis umzuwandeln. Zwei farbige Halbkreise können mit border-bottom erstellt werden, was gleich der Höhe des Kreises ist. Zwei Punkte werden erstellt, indem zwei Kreise mit Pseudoelementen erstellt und mit position:absolute platziert werden. Mit Grenzen, die der Halbkreisfarbe entsprechen, können Sie zwei kreisförmige Endpunkte des Symbols erstellen. Wenn Sie mich fragen, ist es cool.

Ich mag es, Pseudo-Elemente zu verwenden.

Häufig gestellte Fragen zu CSS-Pseudo-Elementen

Was sind die verschiedenen Arten von CSS-Pseudoelementen?

CSS-Pseudoelement wird verwendet, um bestimmte Teile eines Elements zu stylen. Es gibt verschiedene Arten von Pseudoelementen, einschließlich ::before, ::after, ::first-letter, ::first-line, ::selection, ::backdrop, ::placeholder, ::before und ::after. Jedes Pseudoelement richtet sich an einen anderen Teil des Elements. Beispielsweise werden ::first-letter und ::first-line verwendet, um den Inhalt vor und nach dem Elementinhalt einzufügen, während

und

verwendet werden, um den ersten Buchstaben oder die erste Zeile eines Elements auf Blockebene zu stylen. ::before ::after Wie verwendet ich

und

pseudo-Elemente? ::before ::after content und

Pseudo-Elemente werden verwendet, um Inhalte vor und nach dem Elementinhalt einzufügen. Sie werden oft für dekorative Zwecke verwendet, wie zum Beispiel für Ikonen oder Zitate. Um diese Pseudoelemente zu verwenden, müssen Sie das

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

-attribut angeben. Um beispielsweise ein Herzsymbol vor einem Absatz hinzuzufügen, können Sie den folgenden Code verwenden:

Kann ich Pseudoelemente verwenden, um die Form der Form zu stylen? ::placeholder

Ja, Sie können den Formulareingang mithilfe von Pseudoelementen stylen. Es können jedoch nicht alle Formulareingänge unter Verwendung von Pseudoelementen gestylt werden. Beispielsweise kann mit dem

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

pseudoelement den Platzhaltertext für das Eingabefeld stylen. Hier ist ein Beispiel:

Wie kann man den ersten Buchstaben eines Absatzes mit Pseudo-Element stylen? ::first-letter

Sie können das

a[href]:not([href*="#"]):after {
  content: attr(href);
}

Pseudoelement verwenden, um den ersten Buchstaben des Elements auf Blockebene zu stylen. Dies wird normalerweise zum Erstellen von Initialen verwendet. Hier ist ein Beispiel:

Kann ich mehrere Pseudoelemente für dasselbe Element verwenden? ::before ::after Ja, Sie können mehrere Pseudoelemente für dasselbe Element verwenden. Sie können beispielsweise ::before und ::after im selben Element verwenden, um Inhalte vor und nach dem Inhalt einzufügen. Es ist jedoch wichtig, sich daran zu erinnern, dass die Reihenfolge der Pseudoelemente ist.

Pseudo-Element wird immer vor

pseudo-Element eingefügt.

Unterstützen alle Browser Pseudoelemente?

Die meisten modernen Browser unterstützen Pseudoelemente. Ältere Versionen einiger Browser unterstützen jedoch möglicherweise nicht alle Pseudoelemente. Bevor Sie Pseudoelemente verwenden, überprüfen Sie am besten die Browserkompatibilität.

Was ist der Unterschied zwischen Pseudoelementen und Pseudoklasse?

sowohl Pseudo-Elemente als auch Pseudoklasse werden verwendet, um Stile auf Elemente anzuwenden, die auf bestimmten Bedingungen basieren. Sie werden jedoch für verschiedene Zwecke verwendet. Eine Pseudoklasse wird verwendet, um ihren Stil festzulegen, wenn sich ein Element in einem bestimmten Zustand befindet, z. Andererseits werden Pseudoelemente verwendet, um bestimmte Teile eines Elements zu stylen.

Kann ich Pseudoelemente mit JavaScript verwenden?

Pseudoelemente sind nicht Teil des DOM, daher können sie nicht mit JavaScript direkt zugegriffen oder manipuliert werden. Sie können jedoch den auf ein Pseudoelement angewendeten Stil ändern, indem Sie den Stil des übergeordneten Elements mit JavaScript ändern.

Wie kann ich ::selection Pseudo-Element verwenden?

::selection Pseudoelement wird verwendet, um das Erscheinungsbild des vom Benutzer ausgewählten Text zu ändern. Sie können beispielsweise die Hintergrundfarbe und Textfarbe des ausgewählten Textes ändern. Hier ist ein Beispiel:

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

Kann ich Pseudoelemente animieren?

Ja, Sie können Pseudoelemente mithilfe von CSS-Animationen oder -übergängen animieren. Denken Sie jedoch daran, dass nicht alle Eigenschaften animiert werden können. Zum Beispiel können Sie die Deckkraft oder Transformation eines Pseudoelements animieren, aber Sie können das content -attribut nicht animieren.

Das obige ist der detaillierte Inhalt vonATOZ CSS Screencast: CSS -Pseudoelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!