Question

我的商店里有一个网格，每行有3个产品。最后一行的行数和产品数量未知，可能是一到三。我需要一个css选择器来定位最后一行，无论是一个产品还是三个产品。 html就像：

 <ul>
     <li>Row One</li>
     <li>Row One</li>
     <li>Row One</li>
     <li>Row Two</li>
     <li>Row Two</li>
     <li>Row Two</li>
     <!-- Last row, could be on, two or three products-->
     <li>Row Three</li>
     <li>Row Three</li>
     <li>Row Three</li>
 </ul>

我尝试使用：

ul li:last-child + li

但这显然不起作用。

这可能吗？这是一个包含可能方案的演示：http://codepen.io/anon/pen/Jkqry/

谢谢。

Answer 1

您使用最后一个子选择器。

li:last-child
{
your css here....
}

Answer 2

更新：

如果我理解你的问题：

这应该是你的目标

ul{
    display:inline-block;
    float: left;
    list-style: none;
}
ul:last-child{
    color: #ff0000;
}

和html：

<ul>Row 1:
    <li>Row One</li>
    <li>Row One</li>
    <li>Row One</li>
    <li>Row Two</li>
    <li>Row Two</li>
    <li>Row Two</li>
    <! -- Last row -->
    <li>Row Three</li>
    <li>Row Three</li>
    <li>Row Three</li>
</ul>

<ul>Row 2:
    <li>Row One</li>
    <li>Row One</li>
    <li>Row One</li>
    <li>Row Two</li>
    <li>Row Two</li>
    <li>Row Two</li>
    <! -- Last row -->
    <li>Row Three</li>
    <li>Row Three</li>
</ul>

<ul>Row 3:
    <li>Row One</li>
    <li>Row One</li>
    <li>Row One</li>
    <li>Row Two</li>
    <li>Row Two</li>
    <li>Row Two</li>
    <! -- Last row -->
    <li>Row Three</li>
</ul>

请看这个小提琴：http://fiddle.jshell.net/HYyxb/

Answer 3

或者，你不能把你想要的li（最后一个或者它是什么）放到一个类中，然后为那个类写css吗？

Answer 4

我认为你正在寻找这个：

ul li:nth-child(6) ~ li{
    color: red;
}

如果您知道有多少行，则可以使用。

Working Fiddle

Answer 5

您可以使用last-of-type选择器：li:last-of-type 它必须有效;）

如何使用css选择器仅设置最后一行的样式？

5 个答案: