Eine Einführung in Pseudoelemente in CSS und ihre Unterschiede zu Pseudoklassen

Pseudoelemente

Wir wissen, dass mit der weiteren Verbesserung der CSS-Spezifikationen immer mehr neue CSS-Pseudoelemente hinzugefügt wurden, aber in der täglichen Entwicklung werden wir Häufig verwendet und Die optimistischere Browser-Unterstützungssituation ist vorher und nachher. Aber was wir in der täglichen Entwicklung verwenden, sind: nach {content: ”;}, um Floats zu löschen und ein Element hinzuzufügen (wobei auf die Verwendung eines einzelnen Doppelpunkts in IE8-Browsern geachtet wird). Aber was sind die möglichen Werte von Inhalten? ?
1. String: Inhalt: „ein String“ – Hinweis: Sonderzeichen müssen in Unicode codiert werden;
2. Bild: Inhalt: url(/path/to/benjamin.png) – Das Bild wird eingefügt in seiner Originalgröße. Da das Bild Farbverläufe unterstützt, können Sie Farbverläufe auf Pseudoelemente anwenden:
3 – Dies ist nützlicher zum Löschen von Floats und zum Festlegen von Hintergrundbildern können die Breite und Höhe des Hintergrundbilds festlegen, wir können sogar das Attribut „Hintergrundgröße“ verwenden, um die Größe des Hintergrundbilds anzupassen.
4. Es ist nützlicher, den Stil der Listenseriennummer festzulegen. Weitere Informationen finden Sie im folgenden Code:

ol {   
    countercounter-reset: li;   
}   
ol>li {   
    position: relative;   
    padding-left: 2em;   
    line-height: 30px;   
    list-style: none;   
}   
ol>li:before {   
    position: absolute;   
    top: 8px;   
    left: 0;   
    height: 16px;   
    width: 16px;   
    line-height: 16px;   
    text-align: center;   
    content: counter(li);   
    countercounter-increment: li;   
    border-radius: 50%;   
    background-color: #ccc;   
    font-size: 12px;   
    color: #efefee;   
}

PS: Wir können den Inhalt nicht festlegen: „c1a436a314ed609750bd7c7d319db4daBenjamin5. Inhalt: attr(attrName)
Inhalt kann die Funktion attr verwenden, um den Attributwert abzurufen, was besonders wichtig ist Praktisch bei Verwendung in Pseudoklassen. Siehe den folgenden Code:

<style type="text/css">   
    .list li {   
        list-style: none;   
        margin-bottom: 20px;   
    }   
    .list li span {   
        vertical-align: middle;   
    }   
    .list li:before {   
        content: attr(data-index);   
        display: inline-block;   
        width: 20px;   
        height: 20px;   
        text-align: center;   
        color: #fff;   
        vertical-align: middle;           
        background-color: #f00;   
        border-radius: 50%;   
    }   
</style>   
<ul class="list">   
    <li data-index="1"><span>专注前端开发和用户体验</span></li>   
    <li data-index="2"><span>专注前端开发和用户体验</span></li>   
    <li data-index="3"><span>专注前端开发和用户体验</span></li>   
    <li data-index="4"><span>专注前端开发和用户体验</span></li>   
    <li data-index="5"><span>专注前端开发和用户体验</span></li>   
</ul>

Nachdem ich bereits gesagt habe, sprechen wir über die im IE aufgetretenen Fehler:
Bug Beschreibung: Verwenden Sie Pseudoklassen, um die Bildumschaltung „+“/“-“ zu implementieren, indem Sie die geöffnete Klasse hinzufügen und entfernen. Der Effekt ist jedoch in IE8 seltsam und kann in anderen Browsern nicht korrekt gerendert werden:

.plus {   
    position: relative;   
    display: inline-block;   
    vertical-align: top;   
    width: 20px;   
    height: 20px;   
    margin-right: 24px;   
    border: 1px solid #fdaa47;   
    border-radius: 3px;   
    overflow: hidden;   
}   
/* 横向 */
.plus:before {   
    content: '';   
    position: absolute;   
    top: 10px;   
    left: 3px;   
    width: 14px;   
    height: 1px;   
    background-color: #fdaa47;   
    display: block;   
}   
/* 纵向 */
.plus:after {   
    display: block;   
    content: '';   
    width: 1px;   
    height: 14px;   
    background-color: #fdaa47;   
    position: absolute;   
    left: 10px;   
    top: 3px;   
}   
.opened:after {   
    top: -30px;   
}

Beim Übergeben von addClass('opened') und removeClass('opened') zum Vertauschen der Plus- und Minuszeichen: Der Effekt im IE8-Browser ist nicht wie erwartet und einige Stile kann nicht abgedeckt werden. Die aktuelle Lösung lautet wie folgt:

<p class="parent">   
    <i class="plus"></i>   
</p>   
<script type="text/javascript">   
$(&#39;.parent&#39;).on(&#39;click&#39;, function() {   
    var $i = $(this).find(&#39;i&#39;),   
        className = $i.attr(&#39;class&#39;);   
    className = /opened/.test(className) ? &#39;plus&#39; : className +&#39; opened&#39;;   
    $i.replaceWith(&#39;<i class="&#39;+ className +&#39;""></i>&#39;);   
});   
</script>

Ähnlichkeiten und Unterschiede zwischen Pseudoklassen und Pseudoelementen
1. W3C CSS 2.1 Selectors
unterscheidet nicht zwischen Pseudoklassen und Pseudoelementen. Sie verwenden alle einen Doppelpunkt
wie
Pseudoklasse: erstes Kind,
Pseudoelement: erste Zeile
PS: Die Spezifikation erwähnt eindeutig die Schreibreihenfolge mehrerer Pseudoklassen eines Links:
Beachten Sie, dass der A:hover nach den Regeln A:link und A:visited platziert werden muss. da andernfalls die Kaskadenregeln die Eigenschaft „Farbe“ der A:hover-Regel verbergen. Da A:active nach A:hover platziert wird, wird die aktive Farbe (Lime) angewendet, wenn der Benutzer A aktiviert und mit der Maus darüber fährt Element.

2. CSS-Selektoren Ebene 3
Diese Spezifikation unterscheidet zwischen Pseudoklassen und Pseudoelementen. Pseudoklassen verwenden einen einzelnen Doppelpunkt, Pseudo- Elemente beginnen mit einem Doppelpunkt.
Beispiel:
pseudo-class: first-child
pseudo-element::first-line, ::first-letter, ::before, ::after
CSS 3 wird hinzugefügt Basierend auf CSS2.1 gibt es viele Pseudoklassen: Ziel, UI-Elementstatus-Pseudoklassen: geprüft usw., strukturelle Pseudoklassen: nth-child() usw. Einzelheiten finden Sie in der Spezifikation.

3. CSS-Selektoren Level 4-Entwurf
Dieser Entwurf fügt viele neue Pseudoklassen hinzu, z. B. solche, die sich auf den Eingabekontrollstatus, den Wertstatus und den Wertüberprüfungs-Pseudo beziehen -Klassen, baumstrukturierte Pseudoklassen, gitterstrukturierte Pseudoklassen usw.

4. CSS-Pseudoelemente-Modul Stufe 4 – erster öffentlicher Arbeitsentwurf des W3C, 15. Januar 2015
Einige Pseudoelemente hinzugefügt, wie zum Beispiel:
Auswahl hervorgehobener Inhalte : die Pseudoelemente ::selection, ::spelling-error und ::grammar-error,
Placeholder Input: das Pseudoelement ::placeholder.

5. Häufige Anwendungen
Pseudoklasse:
1) ein Linkstil
2) interlaced Farbwechsel
Pseudoelement:
1 ) Die häufigste Verwendung von Pseudoelement After ist das Löschen von Floats,
.fix{*zoom:1;}
.fix:after,.fix::after{display: block content: „klar“; Höhe: 0; Überlauf: ausgeblendet; 2) Buchstabenabstand + Anfangsbuchstabe zum Ausblenden des Schaltflächentexts >

Das obige ist der detaillierte Inhalt vonEine Einführung in Pseudoelemente in CSS und ihre Unterschiede zu Pseudoklassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!