html - 显示第一组 ul li 并隐藏所有后续使用 CSS

Question

我有以下 HTML:

<ul class="articles">
    <li>
        <!-- Display these -->
        <ol class="faces">
            <li>
                <a href="#">View More #1</a>
            </li>
            <li>
                <a href="#">View More #2</a>
            </li>
        </ol>
    </li>
    <li>
        <!-- Hide these -->
        <ol class="faces">
            <li>
                <a href="#">View More #3</a>
            </li>
            <li>
                <a href="#">View More #4</a>
            </li>
        </ol>
    </li>
</ul>

首次加载页面时，我想显示第一个 ol.faces li's(带有 #1 和 #2 anchor 链接)并隐藏随后的 ol li's。这是否可以在不添加任何更多类的情况下使用 css？

Answer 1

隐藏 .article 的直接后代的所有 li 标签

   .articles>li{
        display:none;
    }

显示 .article 中的第一个 li

.articles>li:first-child{
    display: block;
}

工作示例: http://jsfiddle.net/xNnpR/