CSS:如果类是奇数/偶数，则更改边距

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

好的，所以有一些问题。

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

第二，我认为你的 css 属性不是你想要的。而不是margin-top我想你需要top 。这意味着您希望将元素放置在距离最近的父项 position: relative 的位置。或position: absolute .

三、你的css nth-child选择器是错误的。 nth-child选择器适用于您放置它的元素。 <img>标签始终是第一个 child ，所以我推断您希望将其放在 <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>

希望这有帮助!