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

奇数链接标记接收偶数标记的css属性margin right。我已经三次检查了标签，它确实是左下一行中一个奇怪的元素，标记为[Live]。为什么会发生这种情况？我如何修复它？ HTML:

---

[

奇数锚标记接收边距的原因是：n个Child偶数伪选择器将对相对于父元素的偶数元素进行计数，而不管元素类型如何

因此，由于有许多元素不是父.thumbnails中的元素，因此选择器将选择父.thumbnails中的每个偶数元素，请检查它是否为a标记，以及是否为：添加边距

为了实现您正在尝试的功能，您需要向所有偶数锚点元素添加一个唯一的类，或者将a标记放置在只包含a标记的包含元素中

考虑尝试以下方式：

HTML:

---

奇数锚点标记接收边距的原因是：nth child偶数伪选择器将对相对于父元素的偶数元素进行计数，而不考虑元素类型

因此，由于有许多元素不是父.thumbnails中的元素，因此选择器将选择父.thumbnails中的每个偶数元素，请检查它是否为a标记，以及是否为：添加边距

为了实现您正在尝试的功能，您需要向所有偶数锚点元素添加一个唯一的类，或者将a标记放置在只包含a标记的包含元素中

考虑尝试以下方式：

HTML:

---

你能提供HTML吗？用你的代码的最基本的感觉，它似乎在按预期工作。很可能你在其他地方进行了样式设计。偶数不会自动为奇数的第n个子元素进行样式设计。那么你认为哪个奇数元素的边距是偶数？而且，className不是css目标的有效HTML属性。val不是吗id HTML语法。@Zader啊，好的，这很有意义，而且是一种重要的信息。；你能提供HTML吗？请提供你代码的最基本的感觉，它似乎在按预期工作。很可能你在其他地方进行了样式设置。即使你不会自愿为一个奇怪的第n个孩子设置样式。那么你认为得到了哪个奇怪的元素甚至是边距？同样，className对于css目标不是有效的HTML属性。不是有效的HTML语法。@Zader啊，好的，这很有意义，是一种重要的信息；

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

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

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

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