html - CSS目标切换-初始设置为可见

我有一个简单的html / css切换设置

#toggle1 {
  display: none;
}

#toggle1:target {
  display: block;
}

#toggle2 {
  display: none;
}

#toggle2:target {
  display: block;
}

<a href="#toggle1">Show1</a><br />
<a href="#toggle2">Show2</a>
<p id="toggle1">1</p>
<p id="toggle2">2</p>

通过显示和隐藏可以按需工作。但是我希望初始段落在页面加载时可见。如果删除#toggle1 {display: none;}，它将无法正常工作。

任何帮助将是最大的帮助和赞赏。

提前致谢。

最佳答案

这只是一个小技巧，但是如果您反转隐藏元素的顺序，请将display:block添加到“默认”项，然后将display:none添加到:target ~ #toggle1，则它应模拟默认的选定项：

#toggle1, #toggle1:target, #toggle2:target {
  display: block;
}
:target ~ #toggle1, #toggle2 {
  display: none;
}

<a href="#toggle1">Show1</a><br />
<a href="#toggle2">Show2</a>
<p id="toggle2">2</p>
<p id="toggle1">1</p>