css - 仅使用 CSS，是否可以使只有一项的 UL 列表没有元素符号？

Question

有没有可能只使用 CSS，有一个甚至在 IE8 上也能工作的解决方案，那

1. 当 <ul>列表有 2 个或更多元素，然后像往常一样将元素符号放在元素前面。
2. 当只有 1 个元素时，不要显示元素符号，因为单个元素前面有元素符号会很奇怪。

示例显示在 http://jsfiddle.net/SzQL6/37/ 上

<input id="an-input">
<ul id="the-list">
    <li>error msg 1</li>
    <li>error msg 2</li>
</ul>

(错误信息在错误信息上方输入框的左边缘左对齐，有元素符号和没有元素符号。)

使用 JavaScript，我可以做到:http://jsfiddle.net/SzQL6/40/

但这只能通过 CSS 来完成吗(并且它可以在 IE8 上工作)？

Answer 1

是的，你可以只用 CSS 做到这一点，虽然它只与 CSS3 兼容(任何拥有更新浏览器的人都会有，或者正如 Guffa 指出的那样，IE >= 9)，通过使用 :only -child 伪类选择器:

.error-list { list-style-position: inside; margin-top: 0; color: #f77 }
.error-list li:only-child { list-style-type: none; }

该规则被应用到任何 li 元素，该元素是其父元素 (.error-list) 的唯一子元素。根据 MDN:

The :only-child CSS pseudo-class represents any element which is the only child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

请参阅此 fiddle 上的示例: http://jsfiddle.net/SzQL6/41/