CSS nth-child 表达式避免最后一行最多有 3 个元素

Question

我正在创建以三列显示的列表，每个 <li>有一个 border-bottom像这样:

x | x | x
---------    
x | x | x
---------      
z | z | z
---------  

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li><li>z</li><li>z</li>
</ul>

我想做的是创建一个 nth-child 表达式来删除 border-bottom在三行的最后一行，所以对于上面的例子来说:

ul li:nth-child(-n+6) {
    border-bottom:0;
}

问题

然而，稍微复杂一点的是，列表中的元素数量各不相同，因此可能会出现以下任何一种情况:

场景一

x | x | x
---------   
x | x | x
---------   
z |
---  

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li>
</ul>

场景二

x | x | x
---------   
x | x | x
---------   
z | z |
-------

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li><li>z</li>
</ul>

场景三

x | x | x
---------   
z | z |
-------

<ul>
    <li>x</li><li>x</li><li>x</li>
    <li>z</li><li>z</li>
</ul>

结论

我的目标是始终删除 border-bottom在最后一行(或本例中的字符 z)，这样它就没有应用样式。

理想的解决方案是:

ul {
    padding-bottom:-20px;
}

但是padding-bottom:-#px;在 CSS 中不受支持。

我能想到的唯一其他方法是创建一个 nth-child 表达式来只捕获包含 3 的行，而不是最后一行？

我想它可能需要某种除以 3 的方法来寻找应用它的数量？

Answer 1

到目前为止，我已经创建了一个将样式应用于最后一行的选择器

/* all the cells */
li {
   background: #ccc;
}

/* last row, doesn't matter how many cells */
li:nth-last-child(-n + 3):nth-child(3n + 1), /* first element of the last row */
li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li /* all its following elements */
{
   /* reset the style, eg: */
   background: transparent;
}

你可以在这里看到一个活生生的例子http://jsbin.com/ufosox/1/edit

当然这不支持 IE8 及更低版本。