Sonderbare verhalte von Link

Question

So habe ich mit diesem Stift gespielt um: codepen.io/oknoblich/pen/ELfzd

Wenn Sie ein div mit einem Link wie folgt wickeln:

<a href="#"> 
    <div> 
    <img src="link-to-image" /> 
    </div> 
</a> 

Bild bekommt Größe geändert. Warum das? Irgendwelche Ideen?

Answer 1

Wie oben erwähnt, erfordert die > Direktive, dass angegebene Elemente sofort untergeordnet sind (nichts zwischen ihnen in der DOM-Hierarchie). Durch Hinzufügen der <a href> ist die <div> nicht länger ein unmittelbares Kind von .gallery, da die <a> zwischen ihnen ist.

Entfernen die > von den Leitungen 13, 31, 38, 42 (oder, Zugeben des > a > zwischen .gallerydiv und, wie auf der Linie 31 durchgeführt), wird das Problem lösen.

Revised Pen

Answer 2

ich Sie denken, sind die CSS nicht ändern,

.gallery > div{ 
position: relative; 
float: left; 
padding: 5px; 
} 

.gallery > div > img { 
display: block; 
} 

.gallery > div:hover { 
    z-index: 1; 
} 

„>“ dieses Zeichen bedeutet, dass die CSS nur auf diejenigen div gelten, die direkt in .gallery sind, so dass Sie die CSS benötigen toedit .gallery > a> div und so weiter.