Question

我有以下html：

break

我试图隐藏4个中的最后3个<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> 元素，所以我只需要拥有＆＃34; Pageview＆＃34;第一个<li>元素可见。

我在另一个问题中读到，与浏览器最兼容的方法是<li>技巧，所以为了隐藏第一个元素，CSS将如下所示：

li + li

但这对第一个元素很有用。

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

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

我的小提琴就在这里：http://jsfiddle.net/03w0kk4t/

Answer 1

您可以使用CSS＆＃39; 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/

Answer 2

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

或者您可以定位first child。 http://jsfiddle.net/03w0kk4t/4/

关于浏览器支持：Browser support for CSS :first-child and :last-child

P.S。在这种情况下，不需要!important。

Answer 3

您需要更改CSS，试试这个。

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

Answer 4

您可以使用CSS3选择器来制作所需的行为。使用this reference获取更多帮助。

css的例子

li:nth-child(2),li:nth-child(3),li:nth-child(4){display:none;}

Answer 5

最兼容浏览器的解决方案确实是使用相邻的兄弟选择器<? if (!$group_value['group_equals_header_number']) { continue; } ?> <div class="<?= $group_value['is_first_group'] ? 'colored' : ''> <?= echo $group_value['group_name'] ?> <?= echo $group_value['part_letter'] ?> </div>（IE7 +和现代浏览器）。您只需将li + li放入此规则，并默认显示第一个元素。

display: none

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

参考：Adjacent sibling selectors

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

5 个答案: