我创建的列表显示为三列,每个< li>有一个边框底部像这样：
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>
我想做的是创建一个第n个子表达式,以删除三个最后一行的边框底部,因此上述示例将是：
ul li:nth-child(-n+6) {
border-bottom:0;
}
问题
然而,稍微复杂一点的是,列表中的项目数量会有所不同,因此可能会出现以下任何情况：
情景1
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>
情景2
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>
情景3
x | x | x
---------
z | z |
-------
<ul>
<li>x</li><li>x</li><li>x</li>
<li>z</li><li>z</li>
</ul>
结论
我的目的是总是删除最后一行的边框底部(或在本例中为字符z),以便它不具有应用的样式.
一个理想的选择是：
ul {
padding-bottom:-20px;
}
但是padding-bottom： – #px; CSS不支持
我可以想到的唯一其他方法是创建一个第n个子表达式,以仅捕获包含3,不是最后一行的行？
我想这可能需要一些3分才能寻找适用的金额呢？
解决方法
到目前为止,我已经创建了一个将样式应用到最后一行的选择器
/* 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和更少.
