Question

我试图改变边距，使图像上下锯齿状。我发现this article接近，但将一个更改应用于所有.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

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

首先，它会将所有<li>个元素与.brochureImg匹配，这些元素在同一级别。
然后深入了解并在每个<a>

<li>

最后它在<img>里面打了一针。

这里，在img的这个级别上，:nth-child(odd)仅应用于一个图像（每个链接中只存在一个图像），这显然计为奇数（只有一个=第一个）。对于所有其他人来说也是如此，即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 2

好的，所以有一些问题。

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

其次，我认为你的css属性不是你想要的那个。而不是margin-top我认为你需要top。这意味着您希望将项目放置在最近的父position: relative或position: absolute的位置。

第三，你css nth-child选择器错了。 nth-child选择器适用于您放置的项目。 <img>标记始终是第一个孩子，因此我推断您希望它位于<li>标记上。

最后，一个小小的便利：你可以在你的css中添加:nth-child(2)选择器，这样你就不需要添加一个类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 3

当您执行.brochureImg a img:nth-child(odd)时，您说“使用img a选择奇数.brochureImg”。

但那是不你想说的话。

执行此操作，.brochureImg:nth-child(odd) a img您将使用.brochureImg与a选择奇数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 4

也许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 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而不是其中的图像。你内心也需要把它们封装在自己的ul中。在这种情况下，我发现保证金在这方面效果不佳。你需要使用top和position relative：

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

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

CSS：如果class是奇数/偶数，则更改边距

6 个答案: