Question

根据我的CSS属性，应该在屏幕上打印七个divs。我正在使用:nth-child选择器，以便识别divs的特定顺序。

我决定将八个向前设置为display:none - 所以这意味着不要在屏幕上打印。这很简单并且完全正常工作，但是，我注意到当控制台日志打开时，它与屏幕上打印的不同。即使前面的八个用display:none设置，divs代码仍可由浏览器读取。总而言之，divs不会按我的意愿打印，但日志会加载它。由于内容的加载，我担心导致导航变慢。

是否有可能使浏览器无法读取八个以上的内容？

这是我的代码HTML / CSS：

HTML

<div class="random-banners">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
</div>

CSS

.random-banners > div:nth-child(1),
.random-banners > div:nth-child(2),
.random-banners > div:nth-child(3),
.random-banners > div:nth-child(4),
.random-banners > div:nth-child(5),
.random-banners > div:nth-child(6),
.random-banners > div:nth-child(7) {
    width:100%;
    height:200px;
    background:#006633;
    float:left;
}

.random-banners > div:nth-child(n+8) {
    display:none;
}

Answer 1

display: none，不删除html节点，它只是将它们隐藏在页面流中，所以就好像它们不在那里但它们仍然存在，所以它们可以被显示，查询并随时由javascript或css操纵（也是css）。

你真的不应该担心这是正常行为。但你应该关注你的css写作。这种写作方式更好，更快，更短，并且相同：

.random-banners > div:not(:nth-child(n+8)) {
    width:100%;
    height:100px;
    background:#006633;
    float:left;
}
.random-banners > div:nth-child(n+8) {
    display:none;
}

使用CSS选择器并在源上显示none

1 个答案: