Question

我有以下HTML：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
</ul>

以下CSS适用于它：

body {
    padding: 0;
    margin: 0;
    display: flex;
    align-items:center;
    justify-content:center;
    height: 100vh;
    background: #eee;
}

ul {
    max-width: 400px;
    min-width: 400px;
}

ul > li {
    overflow: hidden;
    float: left;
    width: 30%;
    height: 50px;
    margin: 1%;
    background: orange;
    color: #fff;
    display: flex;
    align-items:center;
    justify-content:center;
}

ul > li:nth-child(3n + 1):nth-last-child(3) {
    background: #727272;
}

你可以在小提琴中看到相同的内容 HERE 。

现在是以下选择器：

ul > li:nth-child(3n + 1):nth-last-child(3) {
        background: #727272;
    }

似乎是在选择最后一行中的第一个元素，我不太了解如何？

另外

ul > li:nth-child(3n + 1):last-child {
        background: #727272;
    }

不行。为什么？

我希望以下选择器选择最后一行的第一个元素：

ul > li:nth-child(3n + 1):nth-last-child(1) {
        background: #727272;
    }

那么究竟我在这里误解了什么，为什么多个nth-child选择不能按我预期的方式工作？

我是如何努力实现的： 选择最后一行中的第一个元素..我相信我已经实现过，只是不知道它是如何工作的。

Answer 1

此..

ul > li:nth-child(3n + 1):nth-last-child(1) {
        background: #727272;
    }

不起作用，因为它不符合两个条件。

它不是:nth-last-child(1)和:nth-child(3n+1)所以它没有被选中。

这有效

ul > li:nth-child(3n + 1):nth-last-child(3) {
        background: #727272;
    }

becuasie既是li:nth-child(3n + 1)又是:nth-last-child(3)。

但是，它选择最后一行中的第一个元素的事实是纯粹巧合。

CSS无法检测布局。它根本不知道这是连续的。 CSS选择元素而不选择任何其他内容。

多个n-last-child没有按预期工作。为什么？

1 个答案: