Anwenden von Stilen auf das untergeordnete Element eines benachbarten Geschwisters

Question

Ich versuche, die Größe von Bildern in einer Reihe mit CSS zu ändern, basierend darauf, wie viele Bilder sich in derselben Zeile befinden. Zum Beispiel, wenn es vier img Elemente in der gleichen gibt, sind sie auf eine bestimmte Art und Weise gestaltet. Hier ist der Arbeitscode, basierend auf this answer:

HTML:

<p> 
    <img src="preview.png"> 
    <img src="preview.png"> 
    <img src="preview.png"> 
    <img src="preview.png"> 
</p> 

CSS:

.post-content p img:first-child:nth-last-child(4), 
.post-content p img:first-child:nth-last-child(4) ~ img { 
    width: 25%; /* fallback for browsers that don't support calc */ 
    width: calc((100%/4) - 0.8%); 
    margin-left: calc(1%); 
} 

.post-content p img:first-child:nth-last-child(4) { /* First image in group of four */ 
    margin-left: 0; 
} 

Das Ergebnis sieht wie folgt aus:

Allerdings bedeutet dies nicht für Bilder arbeiten in a Tags eingewickelt, aber mit dem Rest der Formatierung identisch, wie folgt aus:

<p> 
    <a href="#"><img src="preview.png"></a> 
    <a href="#"><img src="preview.png"></a> 
    <a href="#"><img src="preview.png"></a> 
    <a href="#"><img src="preview.png"></a> 
</p> 

Ich bin nicht in der Lage, eine Lösung in diesem Fall zu finden. Jede Hilfe würde sehr geschätzt werden.

Answer 1

Das :nth-child() ‚s, :first-child‘ s, und Geschwister-Selektor muß aus den a-Tags basieren, da diejenigen, die Kinder und Geschwister sind, dann sollten die Wähler mit img Ende des Ziel CSS-Eigenschaft des Bildes

p a:first-child:nth-last-child(4) img, 
 
p a:first-child:nth-last-child(4) ~ a img { 
 
    width: 25%; 
 
    width: calc((100%/4) - 0.8%); 
 
    margin-left: calc(1%); 
 
} 
 

 
p a:first-child:nth-last-child(4) img { 
 
    margin-left: 0; 
 
}

<p> 
 
    <a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a><a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a><a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a><a href="#"><img src="http://kenwheeler.github.io/slick/img/fonz1.png"></a> 
 
</p>

Answer 2

Haben Sie versucht, die img durch eine a vor first-child in Ihrem CSS zu ersetzen? Das heißt,

.post-content p a:first-child:nth-last-child(4) img, 
.post-content p a:first-child:nth-last-child(4) ~ a img { 
    width: 25%; 
    width: calc((100%/4) - 0.8%); 
    margin-left: calc(1%); 
} 

.post-content p a:first-child:nth-last-child(4) img { 
    margin-left: 0; 
}