我以前只使用Javascript来切换元素，这很烦人。
然后我学会了这样做，这看起来像天赐之物：
<script type="text/css">
input[type=checkbox]+div
{
display:none;
}
input[type=checkbox]:checked+div
{
display:block;
}
</script>
<label for="foo"><button>Toggle!</button></label>
<input id="foo" type="checkbox" />
<div>
This is getting toggled.
</div>
这是有效的，但它非常糟糕，在语义上没有任何意义，除非你真的在表单中设置样式。
前几天有人指出了:target选择器，这在语义上更容易理解：
<script type="text/css">
a
{
display:none;
}
a:target
{
display:block;
}
</script>
<a href="#foo"><button>Toggle!</button></a>
<a id="foo">
This is getting toggled.
</a>
权衡的是，与复选框不同，目标是单向的：复选框开启和关闭，而目标只是“＃34; on＆＃34;”。为了实现这一目标＆＃34;关闭＆＃34;你必须点击另一个锚点，这并不总是令人满意的。
是否有某种方式以语义上适当的方式切换而不必诉诸Javascript？