CSS：nth-​​child（n + 1）不适用于“显示”吗？

Question

尝试获取内联列表，而不在ul和li之间插入额外的标记。我需要这样做，因为基本上我们的客户用来创建文档的应用程序有一个“选择一个值的一个标签”的事情，否则在那里潜行<br/>是非常基本的称之为一天。

请访问http://jsfiddle.net/EkQKL/3/，了解我正在讨论的问题。

我正在使用以下CSS：

ul {
    margin:0 0 0 2em;
    padding:0 0 0 2em;
    font-weight:bold;
    text-indent:-2em;
    list-style-type:none;
}    

ul li {
    font-weight:normal;
    margin-right:1em;
}

ul li:nth-child(n+1){ /*aye, this is the problem*/
    display:inline;
}

...但总是如此，这似乎只是忽略了n + 1部分并将其应用于每个li，这反过来使第一个li依偎ul中的文本}。哎呀。

因此，如果我将它设置为n + 2，我会得到我期望的结果;第一个li是'正常'，其余的都是水平排列的。但是将其设置为n+1我会期望它单独留下第一个元素，然后将display:inline应用于所有后续li，但它没有做这一点。

我没有能力真正使用很多类或添加额外的HTML元素，所以我对这个有点不知所措。我唯一的解决方法是将标题放在ul元素之外 - 其他样式表的其他问题可以应用于此文档。

我只是忽略了nth-child这件事吗？或者这更多地与display及其如何应用有关？这感觉就像'一个bug'，但我并不是想要过多的假设;我可能不会像我想象的那样聪明。 ：）

Answer 1

这只是因为ul li:nth-child(n+1)表示它应该为每个li设置样式，即ul的孩子 - 从第一个孩子开始。从本质上讲，这与ul li {}之间没有区别，因为无论如何，它都会为每个孩子定型。因此，:nth-child(n+1)甚至没有做任何事情。

:nth-child(n+2)有效的原因，是因为它首先为第二个li设置样式。