CSS：使用 :target 更改多个 ID 上的 css

我正在尝试建立一个基于纯 HTML/CSS 的网站，该网站使用 :target 来指定要显示的内容。

所以我有一个菜单，其中有 3 个选项卡，当目标等于 ID 时，选项卡会突出显示或其他内容：

HTML:

<table>
<tr>
    <td id="id01" class="content2">
        <a href="#id01">Menu1</a>
    </td>
    <td id="id02" class="content2">
        <a href="#id02">Menu2</a>
    </td>
    <td id="id03" class="content2">
        <a href="#id03">Menu3</a>
    </td>
</tr>
</table>

CSS:

.content2 {
    background-color: #FFF;
}
.content2:target {
    background-color: #999;
}

虽然这工作得很好，但我现在想添加更多内容。 我创建了 3 个 div，其 id 与上面相同，并设置了它们的初始值visibility to hidden，以及目标 idvisibility然后将更改为visible.

HTML:

<div id="id01" class="content">
<p>Text for menu1</p>
</div>
<div id="id02" class="content">
    <p>Text for menu2</p>
</div>
<div id="id03" class="content">
    <p>Text for menu3</p>
</div>

CSS:

.content {
  visibility: hidden;
}

.content:target {
  visibility: visible;
  position: absolute;
}

这两件事在分开时工作得很好，但如果我将它们全部添加在一起，它只对最顶层的 id（代码中最早指定的 id）生效，而不是对两者都生效，即使它们具有不同的类。出了什么问题，可以做吗？

抱歉，介绍很长，但我认为需要了解我想要实现的目标。我想更改目标菜单选项卡上的背景，同时更改目标 div 的可见性。 提前致谢。

编辑：Jakub S 的答案有效 - 但是，我不知道这是否限制了一些可以用它完成的事情。它看起来是这样的：

http://jsfiddle.net/jepperask/spjt8y5h/ http://jsfiddle.net/jepperask/spjt8y5h/

来自 CSS 选择器级别 3

http://www.w3.org/TR/selectors/#id-selectors http://www.w3.org/TR/selectors/#id-selectors

ID 类型属性的特殊之处在于，在一致文档中，任何两个这样的属性都不能具有相同的值，无论携带它们的元素的类型如何；无论文档语言是什么，ID 类型属性都可用于唯一标识其元素。

所以你不能在两个元素上设置相同的 id。

但也许您可以将菜单项和 div 包含在具有相同 ID 的一个元素中？否则你就只剩下 JavaScript 了。