CSS - 隐藏 <ul> 中的中间 <li> 元素

Question

我有以下 html:

<div class="dashboard-widget big-counter">
                    <ul class="list-inline">
                        <li>
                            <div class="title">Pageview</div>
                        </li>
                        <li>
                            <div class="title">Order</div>
                        </li>
                        <li>
                            <div class="title">Sales</div>
                        </li>
                        <li>
                            <div class="title">Earning</div>
                        </li>

                    </ul>
                </div> <!-- .big-counter -->

我试图隐藏最后 3 个 <li> 4 个元素中的一个，所以我只需要先获得“网页浏览量”<li>元素可见。

我在另一个问题中读到，最兼容浏览器的方式是 li + li技巧，因此要隐藏第一个元素，CSS 将如下所示:

.dashboard-widget.big-counter ul.list-inline li {
display: none !Important;
}

.dashboard-widget.big-counter ul.list-inline li + li {
display: list-item !Important;
} 

但这对第一个元素非常有效。

如何使用此方法跳过第一个元素并隐藏最后 3 个元素？

或者任何其他浏览器兼容的方法？

我的 fiddle 在这里:http://jsfiddle.net/03w0kk4t/

Answer 1

你可以使用 CSS 的 nth-child():

.dashboard-widget.big-counter ul.list-inline li:nth-child(2),  /*this element's 2nd child*/
.dashboard-widget.big-counter ul.list-inline li:nth-child(3),  /*this element's 3rd child*/
.dashboard-widget.big-counter ul.list-inline li:nth-child(4) { /*this element's 4th child*/
    display: none !important;
}

然后，使用 nth-child(1) 或 :first-child 选择第一个元素

.dashboard-widget.big-counter ul.list-inline li:nth-child(1) {
    display: list-item !important;
}

或

.dashboard-widget.big-counter ul.list-inline li:first-child {
    display: list-item !important;
}

http://jsfiddle.net/joe_young/zqm2osso/