html - 默认设置内容为 'hidden'

Question

我想将以下内容设置为默认隐藏。代码运行良好，但当您登陆页面时它会显示所有内容。

.show {
  display: none;
}

.hide:focus+.show {
  display: inline;
}

.hide:focus {
  display: none;
}

.hide:focus~#list {
  display: none;
}

@media print {
  .hide,
  .show {
    display: none;
  }
}

<p>Click below to learn how to access LearnHub and the services available to employees.</p>
<div>
  <a href="#" class="hide">[hide]</a>
  <a href="#" class="show">[show]</a>
  <ol id="list">
    <p>
      <h2>How to access LearnHub</h2>
      <p>1. Click on the LearnHub button under ‘Business Systems' on the Intranet home page.</p>
  </ol>
</div>

Answer 1

如果您希望ID为list的元素在页面加载时不可见，请在CSS中添加一个条目，将其display属性设置为无。

#list {display:none;}

您还需要添加与当前已有的许多 CSS 规则相反或互补的内容，如下面的代码片段所示:

#list {
  display: none;
}
.hide {
  display: none;
}
.show:focus+.hide {
  display: inline;
}
.show:focus {
  display: none;
}
.show:focus~#list {
  display: inline;
}
.hide:focus+.show {
  display: inline;
}
.hide:focus {
  display: none;
}
.hide:focus~#list {
  display: none;
}

<div>
  <a href="#" class="show">[show]</a>
  <a href="#" class="hide">[hide]</a>
  <ol id="list">
    <p>
      <h2>How to access LearnHub</h2>
      <p>1. Click on the LearnHub button under ‘Business Systems' on the Intranet home page.</p>
  </ol>
</div>