html - 基于 anchor 显示/隐藏内容；默认先显示

Question

使用纯 HTML 和 CSS 可以显示和隐藏带有 anchor 标记的内容:

#red { background: red; }
#blue { background: blue; }
#green { background: green; }
.box {
  width: 200px;
  height: 200px;
  display: none;
}
.box:target {
  display: block;
}

<a href="#red">Red item</a> | <a href="#blue">Blue item</a> | <a href="#green">Green item</a>

<div class="box" id="red"></div>
<div class="box" id="blue"></div>
<div class="box" id="green"></div>

但是如何在页面加载时显示第一个(红色)元素？

Answer 1

如果您可以修改 html 并将红色框放在最后，那么您可以执行以下操作:

#red {
  background: red;
  display: block;
}
#blue { background: blue; }
#green { background: green; }
.box {
  width: 200px;
  height: 200px;
  display: none;
}
.box:target {
  display: block;
}
.box:target ~ #red {
    display: none;
}