css - 使用 CSS 选择器并在源上不显示

Question

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

我决定将八个向前设置为 display:none - 所以这意味着不在屏幕上打印。这很容易，而且工作正常，但是，我注意到打开控制台日志时，它与屏幕上打印的内容不同。即使使用 display:none 设置了 8 位以上，divs 代码仍然可以被浏览器读取。总而言之，div 没有按我想要的方式打印，但日志加载了它。由于加载内容，我担心它会使我的导航变慢。

是否有可能使浏览器无法读取 8 之后的数字？

这是我的 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;
}