html - 为什么奇数链接标签接收偶数标签的 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

您的奇数 anchor 标记获得边距的原因是因为 :nth-child(even) 伪选择器将计算相对于父元素的偶数元素，而不管元素类型。

因此，由于您在父级 .thumbnails 中有许多不是 a 元素的元素，因此选择器将选择父级中的每个偶数元素， .thumbnails，检查它是否是 a 标签，如果是:添加边距。

为了实现您正在尝试的目标，您需要向所有“偶数” anchor 元素添加一个唯一类，或者将 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;
}