Neden çift etiketin css özelliğini alan tek linkli bir etiket var?

Question

Tek bir bağlantı etiketi, çift etiketin kenar boşluğu sağındaki css özelliğini alıyor. Etiketleri üç kez kontrol ettim ve aslında sol alt satırda ([Live] etiketli) tek bir öğe. Bu neden oluyor ve nasıl düzeltebilirim? HTML:

<div className="thumbnails"> 
     <span className="question">A selection of work I have pushed into the Github ether:</span><br /> 
     <img src="./images/entente-logo.png" /> 
     <img src="./images/ski-free-grab.png" /> 
     <img src="./images/instapixies-grab.png" /> 
     <br /> 
     <a href="#">[Live]</a><a href="#">[Code]</a> 
     <a href="#">[Live]</a><a href="#">[Code]</a> 
     <a href="#">[Live]</a><a href="#">[Code]</a> 
     <br /> 
     <img src="./images/secretsnowman-grab.png" /> 
     <img src="./images/gameoflife-grab.png" /> 
     <span className="curly-brax">&#123;An_ORM&#125;</span> 
     <br /> 
     <a href="#">[Live]</a><a href="#">[Code]</a> 
     <a href="#" /><a href="#">[Code]</a> 
     <a href="#" /><a href="#">[Code]</a> 
     <br /> 
    </div> 

CSS:

.thumbnails a:nth-child(even) { 
    margin-right: 40px; 
} 
.thumbnails a { 
    width: 110px; 
    height: 42px; 
    padding-left: 20px; 
} 
a { 
    text-decoration: none; 
    color: black; 
    padding: 10px 14px; 
    transition: all .5s ease-out; 
} 

[:nth-child(even) sözde seçici göreceli hatta elemanları saymak için gidiyor çünkü tek çapa etiketleri marjı alıyorsanız

Answer 1

nedenidir eleman tipine bakmaksızın

Yani ebeveyn .thumbnails içinde a elemanları olmayan sayısız unsurları beri, seçici bir a etiketi olup olmadığını kontrol edin, üst içinde .thumbnails her hatta eleman seçmek için gidiyor ve onu ise: marjı eklemek .

Denediğiniz şeyi elde etmek için, tüm "çift" bağlantı elemanlarına benzersiz bir sınıf eklemeniz veya a etiketlerini yalnızca a etiketlerini içeren bir öğe içine yerleştirmeniz gerekir.

Böyle bir şey çalışıyorum düşünün:

HTML:

<div className="thumbnails"> 
    <span className="question">A selection of work I have pushed into the Github ether:</span><br /> 
    <img src="./images/entente-logo.png" /> 
    <img src="./images/ski-free-grab.png" /> 
    <img src="./images/instapixies-grab.png" /> 
    <br /> 
    <div class="anchorList"> 
     <a href="#">[Live]</a><a href="#">[Code]</a> 
     <a href="#">[Live]</a><a href="#">[Code]</a> 
     <a href="#">[Live]</a><a href="#">[Code]</a> 
    </div> 
    <br /> 
    <img src="./images/secretsnowman-grab.png" /> 
    <img src="./images/gameoflife-grab.png" /> 
    <span className="curly-brax">&#123;An_ORM&#125;</span> 
    <br /> 
    <div class="anchorList"> 
     <a href="#">[Live]</a><a href="#">[Code]</a> 
     <a href="#" /><a href="#">[Code]</a> 
     <a href="#" /><a href="#">[Code]</a> 
    </div> 
    <br /> 
</div> 

CSS:

.thumbnails .anchorList a:nth-child(even) { 
    margin-right: 40px; 
} 
.thumbnails .anchorList a { 
    width: 110px; 
    height: 42px; 
    padding-left: 20px; 
}