主页 / 问题 / 1245726
Accepted
spoon 100500
Asked:2022-02-18 23:00:38 +0000 UTC2022-02-18 23:00:38 +0000 UTC

如何从第三个开始隐藏 div

  • 772

如何从第三个即隐藏 div 有 10 个 div，从 3 个开始需要隐藏它们？

css3

2 个回答

  1. for (i = 0; i < 10; i++) {
  div = document.createElement('div');
  div.innerHTML = i + 1;
  root.appendChild(div);
}
    #root > div:nth-child(n+3) {
  display: none;
}
    <div id="root"></div>

    在此处输入图像描述

    更多关于nth-child

    • 1
  2. Best Answer

    只是CSS。

    所以：

    div {
  display: none;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
}

div:nth-child(1),
div:nth-child(2) {
  display: inline-block;
}
    <div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

    或像这样：

    div {
  display: inline-block;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
}

div:nth-child(n+3) {
  display: none;
}
    <div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

    或像这样：

    div {
  display: none;
  padding: 5px;
  margin: 5px;
  border: 1px solid black;
}

div:nth-child(-n+2) {
  display: inline-block;
}
    <div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

    • 1

相关问题