：第一个类型不起作用

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

您无法单独使用.igrac访问:first/last-of-type，您需要兄弟选择器的帮助：

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