CSS：如果class是odd/even，改变margin

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

当您执行 .brochureImg a img:nth-child(odd) 时，您说的是 "Select odd img with a with .brochureImg"。

但这不是您想说的。

这样做，.brochureImg:nth-child(odd) a img 你会说 "Select odd .brochureImg with a with img"。

这里是 fiddle.

这是片段。

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

改变这个：

.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 的应用位置，而且也不会与您可能拥有的其他代码发生冲突。请注意我是如何在 .brochureImg.

之前添加 .brochureBrand ul li

Answer 3

也许this就是你的答案

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

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

首先，它匹配所有 <li> 个元素 .brochureImg，这些元素 在同一级别 。
但随后它深入并在每个 <li>

<a>

最后它击中了 <img> 里面。

在这里，在这个级别的 img 上，:nth-child(odd) 仅应用于一个图像（每个 link 中只存在一个图像），这显然算作奇数（只有一个 = 第一个）。其他人也一样 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 5

好的，所以有一些问题。

首先，您的 html 格式错误，包含嵌套的 <li> 元素。请参阅下面的示例，了解我是如何修复它的。

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

最近的父项放置的位置

第三，你 css nth-child 选择器是错误的。 nth-child 选择器应用于您放置它的项目。 <img> 标签始终是第一个子标签，因此我推断您希望它出现在 <li> 标签上。

最后，一个小便利：还有一个 :nth-child(2) 选择器，您可以将其放入 css，这样您就不需要添加 class first （可能不是很好的 html class 名称）添加到您要缩进的 <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 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;
}

CSS：如果class是odd/even，改变margin

CSS: If class is odd/even, change margin

css

css-selectors

margin

alternate