有无穷无尽的元素。我想要做的是隐藏除前 4 个元素之外的所有元素。 （带有 :not 选择器）
我想让点击全部可见..这可以用CSS实现吗？
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>/*must hide*/
<li></li>/*must hide*/
<li></li>/*must hide*/
<li></li>/*must hide*/
........ /*must hide foreva*/
</ul>
您可以使用以下解决方案，使用:nth-child https://developer.mozilla.org/en/docs/Web/CSS/:nth-child:
ul li:nth-child(n+5) {
display:none;
}
input[type=checkbox]:checked + ul li {
display:list-item;
}
<input type="checkbox"/>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
您可以使用<input type="checkbox"/>更改项目的可见性。
您还可以使用:nth-child https://developer.mozilla.org/en/docs/Web/CSS/:nth-child with :not https://developer.mozilla.org/en-US/docs/Web/CSS/:not（计算隐藏项目的其他方法）：
ul li:not(:nth-child(-n + 4)) {
display:none;
}
input[type=checkbox]:checked + ul li {
display:list-item;
}
<input type="checkbox"/>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
