css - 如何切换奇数和偶数 - nth-child 和 nth-of-type

Question

我必须交替 top: 0;底部:0；

但我的第二行是第一行的镜像。

它应该是这样的:

出于某种原因，我必须在第一行使用 nth-of-type，在第二行使用 nth-child。

• 我的问题是为什么我不能对两行使用相同的内容？

当我切换它们时，我的布局一团糟。

我看到了this post在堆栈上，但它使用 8 个 css 条目。这对我来说没有任何意义。 (如果我不打算添加更多城市。)

我的 HTML 代码:(8 次几乎相同的代码)

    <a class="content-column content-column-quarter link-image favourite" href="#">

            <figure>
                <img src="img/london.jpg" alt="london" />
                <figcaption class="fc_down">London</figcaption>
            </figure>
    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/bangkok.jpg" alt="bangkok" />
                <figcaption class="fc_up">Bangkok</figcaption>
            </figure>
    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/maui.jpg" alt="maui" />
                <figcaption class="fc_down">Maui</figcaption>
            </figure>
    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/paris.jpg" alt="paris" />
                <figcaption class="fc_up">Paris</figcaption>
            </figure>

    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/stockholm.jpg" alt="stockholm" />
                <figcaption class="fc_up">Stockholm</figcaption>
            </figure>

    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/alberta.jpg" alt="alberta" />
                <figcaption class="fc_down">Alberta</figcaption>
            </figure>

    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/nairobi.jpg" alt="nairobi" />
                <figcaption class="fc_up">Nairobi</figcaption>
            </figure>
    </a>

    <a class="content-column content-column-quarter link-image favourite" href="#">
            <figure>
                <img src="img/bruges.jpg" alt="bruges" />
                <figcaption class="fc_down">Bruges</figcaption>
            </figure>
    </a>

我的 CSS 代码:

#favourites figcaption {
    left: 0;
    padding: 20px;

    font-size: 32px;  }

    .favourite:nth-of-type(-2n + 4) figcaption {
        top: 0;
    }
    .favourite:nth-of-type(-2n + 3) figcaption {
        bottom: 0;
    }
    .favourite:nth-child(2n + 5) figcaption {
        bottom: 0;
    }
    .favourite:nth-child(2n + 6) figcaption {
        top: 0;
    }



.content-column {
    float: left;
    margin-bottom: 30px;
    box-sizing: border-box;  }

    .content-column-full {
        width: 100%;
    }
    .content-column-quarter {
        width: 22%;
        margin-right: 4%;  }

        .content-column-quarter:nth-child(4n+1) {
            margin-right: 0;
        }



.link-image {
    position: relative;  }

    .link-image figure {
        overflow: hidden;  }

        .link-image img {
            width: 100%;
            height: auto;
            transition: transform .2s ease-in-out, filter .2s ease-in-out;
        }
        .link-image figcaption {
            position: absolute;
            color: white;
        }

    .link-image:hover img {
        transform: scale(1.1);
        filter: grayscale(50%);
}

Answer 1

如果您的标题方向模式每 8 个元素重复一次，为什么不使用这样的东西呢？

.favourite figcaption  {
    top: 0;
}
.favourite:nth-of-type(8n + 1) figcaption,
.favourite:nth-of-type(8n + 3) figcaption,
.favourite:nth-of-type(8n + 6) figcaption,
.favourite:nth-of-type(8n + 8) figcaption {
    top: auto;
    bottom: 0;
}