Question

有无穷无尽的元素。而我想做的是隐藏除前4个元素之外的所有元素。（附：不是选择器）

我想点击一下全部可见..这可能用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>

Answer 1

您可以使用: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与: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>

Answer 2

您可以合并:nth-child()伪类和ul li:not(:nth-child(-n + 4)) { display: none; }。

＆＃13;

<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>
</ul>

＆＃13;

<div class="input-group date">
    <div class="input-group-addon">
    <i class="fa fa-calendar"></i>
    </div>
    <input type="text" class="form-control datepickers">
</div>

＆＃13;

Answer 3

这很简单，你应该阅读CSS。

使用它：

{{1}}

隐藏除前4个元素之外的所有元素

3 个答案: