Question

我想为.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;
}

Answer 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

第n个孩子（偶数）不起作用，但奇数工作

1 个答案: