CSS First-Child und Leisten-Kind funktionieren nicht, wenn sie auf demselben Element verwendet werden

Question

Ich habe gerade festgestellt, dass CSS :first-child und :last-child nicht funktionieren, wenn sie auf demselben Element verwendet werden. Nur einer wird verwendet. Ich frage mich, warum das so ist und ob es einen Workaround in CSS gibt? Es scheint mir CSS-Bug zu sein - erstes Element kann auch letztes Element sein.

Ich konnte nichts in Google zu diesem Thema finden. In jedem Lernprogramm wird davon ausgegangen, dass mindestens zwei Elemente vorhanden sind.

Ich suche nach etwas wie: "erstes Kind ist auch letztes Kind" Selektor. Existiert es?

Answer 1

Ich frage mich, warum ist das und ob es gibt eine Abhilfe in CSS? Es scheint mir CSS-Bug zu sein - erstes Element kann auch letztes Element sein.

Es ist kein Fehler. So funktioniert die Kaskade: Wenn ein Element sowohl das erste Kind als auch das letzte Kind ist, dann haben Sie :first-child und :last-child in separaten Regeln und sie stimmen beide mit dem gleichen Element überein, dann wird alles in der später deklarierten oder spezifischeren Regel überschreiben Sie den anderen.

Sie können ein Beispiel für dieses Verhalten here, mit dem border-radius Kurzschrift-Eigenschaft, und Abhilfen finden, die die Komponenteneigenschaften anstelle der Stenografie gehören die Verwendung, sowie eine separate Regel insgesamt Angabe einer der folgenden Selektoren ...

Ich suche etwas wie: "erstes Kind ist auch letztes Kind" Selektor. Existiert es?

wahrsten Sinne des Wortes, würden Sie Kette sowohl Pseudoklassen wie diese, der gut arbeitet:

:first-child:last-child 

Allerdings gibt es eine spezielle Pseudo-Klasse, die die gleiche Art und Weise wirkt:

:only-child 

Der Hauptunterschied (in der Tat der nur Unterschied) zwischen diesen beiden Selektoren ist Spezifität: die erste ist spezifischer, da es eine zusätzliche Pseudo-Klasse enthält. Es gibt keinen Unterschied sogar bei der Browserunterstützung, da :last-child und :only-child beide von genau denselben Versionen jedes Browsers unterstützt werden.

Answer 2

Ich weiß, ich bin massiv zu spät, aber Sie können auch CSS :first-of-type und :last-of-type verwenden. Zum Beispiel:

<blockquote> 
    <p>Some text you want to quote</p> 
</blockquote> 

Diese CSS wird zitiert mit dem Absatz hinzufügen:

blockquote{ 
    quotes: "“" "”" "‘" "’"; 
} 

blockquote p:first-of-type:before{ 
    content:open-quote; 
} 

blockquote p:last-of-type:after{ 
    content:close-quote; 
}