：首先不起作用

Question

我有問題，因爲:first-of-type保證金沒有顯示。我試圖將左右邊距設置爲10px，並將元素設置爲20px。

下面是代碼：

#players { 
 
    width: 960px; 
 
    height: 283px; 
 
    position: relative; 
 
} 
 

 
.igrac { 
 
    width: 220px; 
 
    margin-right: 20px; 
 
    height: 283px; 
 
    position: relative; 
 
    display: block; 
 
    float: left; 
 
    background-color: #fff; 
 
} 
 

 
.igrac:first-of-type { 
 
    margin-left: 10px; 
 
} 
 

 
.igrac:last-of-type { 
 
    margin-right: 10px; 
 
}

<div id="players"> 
 
    <div class="naslov_dela"> 
 
    <p>IGRAČI</p> 
 
    <a href="#">Svi igrači >></a> 
 
    </div> 
 
    <div class="clear_fix"></div> 
 
    <div class="igrac"> 
 
    <img src="images/players/djordjevicdusan.jpg" /> 
 
    <p>Đorđević Dušan</p> 
 
    <p>Tehničar</p> 
 
    <div class="boja"></div> 
 
    </div> 
 
    <div class="igrac"> 
 
    <img src="images/players/petrovicpetar.jpg" /> 
 
    <p>Petrović Petar</p> 
 
    <p>Korektor</p> 
 
    <div class="boja"></div> 
 
    </div> 
 
    <div class="igrac"> 
 
    <img src="images/players/jevticnemanja.jpg" /> 
 
    <p>Jevtić Nemanja</p> 
 
    <p>Libero</p> 
 
    <div class="boja"></div> 
 
    </div> 
 
    <div class="igrac"> 
 
    <img src="images/players/aleksicmilan.jpg" /> 
 
    <p>Aleksić Milan</p> 
 
    <p>Primač</p> 
 
    <div class="boja"></div> 
 
    </div> 
 
</div>

有誰知道爲什麼這個:first-of-type保證金不顯示？

Answer 1

你不能單獨使用:first/last-of-type訪問.igrac，你將需要同胞選擇的幫助：

• adjacent sibling selector +
• general sibling selector ~

#players { 
 
    /*changed to make it responsive*/ 
 
    max-width: 960px; 
 
    width: 100%; 
 
    height: 283px; 
 
    position: relative; 
 
} 
 

 
.igrac { 
 
    /* change width to fit demo view*/ 
 
    width: 125px; 
 
    margin-right: 20px; 
 
    height: 283px; 
 
    position: relative; 
 
    float: left; 
 
    background-color: #fff; 
 
    /*no need for display:block - div is already a block level element*/ 
 
} 
 

 
.clear_fix+.igrac, 
 
.naslov_dela~.igrac:last-of-type { 
 
    background: red 
 
} 
 

 
.clear_fix+.igrac { 
 
    margin-left: 10px 
 
} 
 

 
.naslov_dela~.igrac:last-of-type { 
 
    margin-right: 10px 
 
}

<div id="players"> 
 
    <div class="naslov_dela"> 
 
    <p>IGRAČI</p> 
 
    <a href="#">Svi igrači >></a> 
 
    </div> 
 
    <div class="clear_fix"></div> 
 
    <div class="igrac"> 
 
    <img src="images/players/djordjevicdusan.jpg" /> 
 
    <p>Đorđević Dušan</p> 
 
    <p>Tehničar</p> 
 
    <div class="boja"></div> 
 
    </div> 
 
    <div class="igrac"> 
 
    <img src="images/players/petrovicpetar.jpg" /> 
 
    <p>Petrović Petar</p> 
 
    <p>Korektor</p> 
 
    <div class="boja"></div> 
 
    </div> 
 
    <div class="igrac"> 
 
    <img src="images/players/jevticnemanja.jpg" /> 
 
    <p>Jevtić Nemanja</p> 
 
    <p>Libero</p> 
 
    <div class="boja"></div> 
 
    </div> 
 
    <div class="igrac"> 
 
    <img src="images/players/aleksicmilan.jpg" /> 
 
    <p>Aleksić Milan</p> 
 
    <p>Primač</p> 
 
    <div class="boja"></div> 
 
    </div> 
 
</div>