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 锚链接）并隐藏后续的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;
}