为什么奇数链接标记接收偶数标记的css属性？

Question

奇数链接标记正在接收margin-right的偶数标记的css属性。我已经对标签进行了三重检查，它确实是左下角的一个奇数元素（标记为[Live]）。为什么会发生这种情况，我该如何解决？ 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;
}

[

Answer 1

你的奇数锚标签接收边距的原因是因为:nth-child(even)伪选择器将计算相对于父元素的偶数元素，而不管元素类型如何。

因为在父a中有许多不是.thumbnails元素的元素，选择器将选择父.thumbnails中的每个偶数元素，检查它是否是一个a标签，如果是：添加保证金。

为了实现您的目标，您需要为所有＆＃34;甚至＆＃34;添加一个独特的课程。锚点元素或将a标记放在仅包含a标记的包含元素中。

考虑尝试这样的事情：

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