jquery selector: first-child und :last-child können die Lösung für das Element nicht erhalten

Im Folgenden stellen wir anhand tatsächlicher Codebeispiele vor, wie wir dieses Problem lösen können.

<a href="#" class="button"><</a>
<a href="#" class="button">></a>
<div id="f">F</div>
<div id="s">S</div>
<div id="t">T</div>

Wir müssen nach unserem Wissen das letzte Tag mit der Klassenschaltfläche finden Mit der CSS3--Pseudoklasse können Sie problemlos den folgenden Code schreiben

.button:last-child {
    background-color: #ffd700;
}

Nach dem Ausführen habe ich festgestellt, dass sich die Hintergrundfarbe des zweiten a nicht geändert hat Der CSS-Code ist definitiv korrekt, mit dem HTML muss etwas nicht stimmen. Nach mehreren Änderungen habe ich festgestellt, dass HTML und CSS geändert werden können.

<div>
<a href="#" class="button"><</a>
<a href="#" class="button">></a>
</div>
<div id="f">F</div>
<div id="s">S</div>
<div id="t">T</div>
<style>
div .button:last-child {
    background-color: #ffd700;
}
</style>

Dann wurde mir plötzlich klar, dass das erste Kind und das letzte Kind tatsächlich sehr arrogant und eigensinnig sind. Wenn die untergeordneten Elemente im Vaterelement andere unterschiedliche Tags enthalten, sind sie 2. Eins ist sehr ungehorsam.

Zusammenfassung

Was haben sie also gehört und was nicht? Nach einigen Tests kam ich zu dem Schluss, dass

Bei der ersten Anwendung das erste Kind Die Elemente müssen das gleiche Tag haben. Die Mitte und das Letzte können unterschiedlich sein,
Das Letzte ist das Gegenteil, das letzte Element muss gleich sein, das Vorder- und das Mittelteil können unterschiedlich sein

Das Obige ist der Inhalt, der von der sorgfältig für Sie vorbereitet wurde Herausgeber der Yunqi Community, in Yunqi Die Blogs, Fragen und Antworten, öffentlichen Konten, Charaktere, Kurse und andere Kolumnen enthalten ebenfalls relevante Inhalte. Sie können gerne weiterhin die Schaltfläche Suchen in der oberen rechten Ecke verwenden, um zu suchen für CSS. Der Tag-Code ist firstchild lastchild, jquery last child, jquery firstchild, jquery first child, jquery first last, damit Sie relevanteres Wissen erhalten.

Das obige ist der detaillierte Inhalt vonjquery selector: first-child und :last-child können die Lösung für das Element nicht erhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!