如何隐藏ul的最后三个li

Question

我想像一样从ul中隐藏前两个li

<ul class="newade">
<li>
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>

但当我试图使用JQUERY隐藏时，我遇到了一个问题，它也包括子列表。

<script type="text/javascript">
$('.newade').find("li:gt(1)").hide();
</script>

但我想要这样的结果

<ul class="newade">
<li>
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>Two</li>
<li style="display:none;">Three</li>
<li style="display: none;">Four</li>
<li style="display: none;">Five</li>
</ul>

Answer 1

使用此行：$('.newade>li:not(：lt(2(('(.hide((

$('.newade > li:not(:lt(2))').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="newade">
<li>
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>

Answer 2

为什么css可以编写脚本？：(

.newade>li:nth-child(1), .newade>li:nth-child(2) {
display:none;
}

.newade>li:nth-child(1), .newade>li:nth-child(2) {
display:none;
}

<ul class="newade">
<li>
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>

Answer 3

.newade>li:nth-child(1), .newade>li:nth-child(2) {
display:none;
}

Answer 4

使用css第n个选择器，其中n为0,1,2……所以在第一种情况下它将是-0+2，在第二种情况下，它将是-1+2和

.newade li:nth-child(-n+2) {
display: none;
}

<ul class="newade">
<li>
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>