CSS:nth-​​child(n+1) 不适用于 "display"吗？

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 元素，所以我有点不知所措。我唯一的解决方法是将 header 放在 ul 之外元素 -- 与其他样式表有其他问题的元素可以应用于此文档。

nth-child 有什么问题吗？我只是忽略的事情？或者这更多地与 display 有关以及它是如何应用的？它“感觉像是”一个错误，但我并不想假设太多；我可能没有我想的那么聪明。 :)

Answer 1

这仅仅是因为 ul li:nth-child(n+1) 表示它应该为每个 li 设置样式，即 ul - 从第一个 child 开始。这与 ul li {} 本质上没有区别，因为它会为每个 child 设置样式。因此 :nth-child(n+1) 甚至什么都没做。

:nth-child(n+2) 之所以有效，是因为它从第二个 li 的样式开始。