nth-child(even) 不起作用，但奇怪的工作[重复]答案

【问题标题】：nth-child(even) doesn't work, but odd work [duplicate]nth-child(even) 不起作用，但奇怪的工作[重复]
【发布时间】：2019-02-15 00:51:37
【问题描述】：

我想为.st--player-box添加一个css，偶数的值为float: right;，奇数的值为float: left;

<div class="st--players-container">
        <a href="#">
            <div class="st--player-box">...</div>
        </a>
            <a href="#">
            <div class="st--player-box">...</div>
        </a>
            <a href="#">
            <div class="st--player-box">...</div>
        </a>
            <a href="#">
            <div class="st--player-box">...</div>
        </a>
</div>

我用 CSS 编写了这段代码，但我不知道为什么这不起作用。

.st--players-container .st--player-box {
  display: block;
  width: -webkit-calc(47%);
  border: 1px solid #dadada;
  box-sizing: border-box;
  margin: 0 5px 10px 5px;
  overflow: hidden;
}
.st--players-container .st--player-box:nth-child(odd) {
  float: left;
}
.st--players-container .st--player-box:nth-child(even) {
  float: right;
}

【问题讨论】：

所有<div class="st--player-box"> 都是<a> 中的第一个孩子，所以他们都是奇怪的孩子。你的意思是.st--players-container > a:nth-child(odd) > .st--player-box？
是的，将 nth-child 添加到标签

标签： html css

【解决方案1】：

因为div.st--player-box 不是div.st--players-container 的根子。您需要定位根子元素<a>...</a>

.st--players-container .st--player-box {
  display: block;
  width: -webkit-calc(47%);
  border: 1px solid #dadada;
  box-sizing: border-box;
  margin: 0 5px 10px 5px;
  overflow: hidden;
}
.st--players-container a:nth-child(odd) {
  float: left;
}
.st--players-container a:nth-child(even) {
  float: right;
}

这是一个有效的example

【讨论】：