Bitişik bir kardeşin çocuğuna stilleri uygulama

Question

Görüntüleri aynı sırada kaç görüntüye bağlı olarak CSS içeren bir satırda yeniden boyutlandırmaya çalışıyorum. Örneğin, aynı p modelinde dört img öğesi varsa, bunlar belirli bir şekilde biçimlendirilir.

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; 
} 

sonuç böyle görünüyor:

İşte this answer dayalı çalışma koddur

Ancak bu a etiketleri sarılı görüntüler için çalışır, ancak bu gibi özdeş biçimlendirme, geri kalanı ile değildir:

<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> 

Ben bu durumda bir çözüm bulamıyorum. Herhangi bir yardım çok takdir edilecektir.

Answer 1

:nth-child() 'ler, :first-child' ler ve kardeş seçici olduğunu Resmin CSS özelliği.

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

first-child'dan önce a ile img'u CSS'nizde değiştirmeyi denediniz mi? Yani bu çocuklar ve kardeşler olduklarından hedef, daha sonra seçiciler img bitmelidir, a etiketleri kapalı dayanması gerekir

.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; 
}