css - CSS：如果类是奇数/偶数，则更改边距

Question

我正在尝试交替边距以使图像上下曲折。我发现这篇文章很接近，但将一个更改应用于所有 .brochureImg 类。我究竟做错了什么？

HTML

<div class="brochureBrand">
    <ul>
        <li class="brochureName hrDots"><a href="#">GP & J Baker</a>
            <li class="brochureImg first"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
            <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        </li>
    </ul>
</div>

CSS

.brochureImg {
    display: inline-block;
    margin: 0 auto;
    margin-top: -90px;
    padding: 0 16px 150px 0;
    position: relative;
    z-index: 100;
}

.brochureImg img {
    box-shadow: 3px 3px 8px #666666;
}

.brochureImg a img:nth-child(odd) {
    margin-top: -120px;
}

.brochureImg a img:nth-child(even) {
    margin-top: -60px;
}

.brochureImg.first {
    margin-left: 125px;
}

Answer 1

好的，所以有一些问题。

首先，您的 html 格式不正确，带有嵌套<li>元素。请参阅下面的示例，了解我是如何修复它的。

其次，我认为您的 css 属性不是您想要的。而不是margin-top我认为你需要top. 这意味着您希望您的项目相对于您最近的父级position: relative或放置在哪里position: absolute。

第三，你的cssnth-child选择器错了。选择nth-child器适用于您放置它的项目。标签总是第<img>一个孩子，所以我推断你想要它在你的<li>标签上。

最后，一个小便利：还有一个:nth-child(2)选择器可以放在你的css中，这样你就不需要在你想要缩进的元素中添加一个类first（可能不是很好的html类名） 。<li>

我想这就是你想要的

.brochureBrand {
    position: relative
}

.brochureImg {
    display: inline-block;
    top: -90px;
    padding: 0 16px 150px 0;
    position: relative;
    z-index: 100;
}

.brochureImg img {
    box-shadow: 3px 3px 8px #666666;
}

.brochureImg:nth-child(odd) {
    top: -120px;
}

.brochureImg:nth-child(even) {
    top: -60px;
}

.brochureImg:nth-child(2) {
    margin-left: 125px;
}

<div class="brochureBrand">
    <ul>
        <li class="brochureName hrDots"><a href="#">GP & J Baker</a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
    </ul>
</div>

希望这可以帮助！

Answer 2

请参阅， :nth-child 伪选择器应用于在同一级别上匹配的元素范围。
让我们看看你的选择器做了什么.brochureImg a img:nth-child(odd)：

• 首先，它匹配所有处于同一级别的<li>元素。.brochureImg
• 但随后它深入并<a>在每个<li>
• 最后它击中了<img>内部。

在这里，在这个级别的 img 上，:nth-child(odd)仅应用于一个图像（每个链接中只有一个图像），这显然算作奇数（只有一个 = 第一个）。其他所有的 li, img 也是如此。要点击<li>您正在定位的元素，您应该使用这样的选择器：

    .brochureImg:nth-child(even) {
        top: -60px;
    }

顺便说一句，您在第一个元素中有错字<li>-它没有关闭:)

.brochureImg {
    display: inline-block;
    margin: 0 auto;
    padding: 0 16px 150px 0;
    position: relative;
    z-index: 100;
}

.brochureImg:nth-child(odd) {
  top: 20px;
}

.brochureImg:nth-child(even) {
  top: 60px;
}

    <ul>
        <li class="brochureImg first"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
        <li class="brochureImg"><a href="#"><img src="http://placehold.it/125x175"></a></li>
    </ul>

Answer 3

当你这样做时.brochureImg a img:nth-child(odd)，你说的是“选择奇数与img” 。a.brochureImg

但这不是你想说的。

这样做，.brochureImg:nth-child(odd) a img你会说“选择奇数.brochureImg与a” img。

这是小提琴。

这是片段。

.brochureImg {
  display: inline-block;
  margin: 0 auto;
  margin-top: -90px;
  padding: 0 16px 150px 0;
  position: relative;
  z-index: 100;
}
.brochureImg img {
  box-shadow: 3px 3px 8px #666666;
}
.brochureImg:nth-child(odd) a img {
  margin-top: -120px;
}
.brochureImg:nth-child(even) a img {
  margin-top: -60px;
}
.brochureImg.first {
  margin-left: 125px;
}

<div class="brochureBrand">
  <ul>
    <li class="brochureName hrDots"><a href="#">GP & J Baker</a>

      <li class="brochureImg first">
        <a href="#">
          <img src="http://placehold.it/125x175">
        </a>
      </li>
      <li class="brochureImg">
        <a href="#">
          <img src="http://placehold.it/125x175">
        </a>
      </li>
      <li class="brochureImg">
        <a href="#">
          <img src="http://placehold.it/125x175">
        </a>
      </li>
      <li class="brochureImg">
        <a href="#">
          <img src="http://placehold.it/125x175">
        </a>
      </li>
      <li class="brochureImg">
        <a href="#">
          <img src="http://placehold.it/125x175">
        </a>
      </li>
      <li class="brochureImg">
        <a href="#">
          <img src="http://placehold.it/125x175">
        </a>
      </li>
      <li class="brochureImg">
        <a href="#">
          <img src="http://placehold.it/125x175">
        </a>
      </li>
    </li>
  </ul>
</div>

Answer 4

也许这就是你的答案

.box {
    display: inline-block;
    float: left;
    margin-left: 10px;
    background: black;
    width: 100px;
    height: 150px;
}

.box:nth-child(odd) {
    margin-top: 30px;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Answer 5

改变这个：

.brochureImg a img:nth-child(odd) {
    margin-top: -120px;
}

.brochureImg a img:nth-child(even) {
    margin-top: -60px;
}

对此：

.brochureBrand ul li.brochureImg:nth-child(odd) {
    margin-top: -120px;
}

.brochureBrand ul li.brochureImg:nth-child(even) {
    margin-top: -60px;
}

以上选择奇数类和偶数brochureImg类。

此外，最好使用更具描述性的路径，这样不仅更容易理解 CSS 的应用位置，而且您也不会与您可能拥有的其他代码发生冲突。.brochureBrand ul li注意我之前是如何添加.brochureImg的。

Answer 6

首先，您需要定位 li 而不是其中的图像。另外你内心的 li 需要被包含在他们自己的 ul 中。我发现 margin-top 在这种情况下效果不佳。您需要使用 top 和 position relative：

 li:nth-child(odd){
     position:relative;
     top: -120px;
 }

li:nth-child(even) {
    position:relative;
    top: -60px;
}