html - 使用 CSS 显示/隐藏内容。我如何隐藏默认值

Question

我试图在用户点击 [...] 之前隐藏网页上的某些内容。到目前为止，Google 已经为我提供了以下内容

<p>some text I want to show</p>
<a href="#" class="hide">[...]</a>
<a href="#" class="show">[...]</a>
<div id ="list">
<p>content I want to hide</p>
</div>

CSS

.show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:none; }
@media print { .hide, .show { display: none; } }

它可以工作，但我希望将隐藏设置为默认设置，但我似乎无法弄清楚如何实现它。

一如既往，我们将不胜感激。

Answer 1

只需像下面这样更改 css 即可。

首先隐藏列表。并在焦点显示上。

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

Fiddle