显示第一组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锚链接）并隐藏后续ol li's。这是否可以使用css而不再添加任何类？

Answer 1

隐藏li

的直接后代的所有.article代码

   .articles>li{
        display:none;
    }

在li

中显示第一个.article

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

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

Answer 2

您可以使用选择器：

li:first-child
{
    /* Your CSS  */
}

声明DOCTYPE使其适用于IE8和IE7。

请参阅http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_firstchild_more3

Answer 3

.articles > li:first-child{
   visibility: visible !important;
}


.articles li{
   visibility: hidden;
}