html - CSS:使用 :target 更改多个 ID 的 css

Question

我正在尝试创建一个纯基于 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 设置为 hidden，然后目标 id 的 visibility 将被更改到可见。

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/

Answer 1

来自 CSS 选择器级别 3

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

What makes attributes of type ID special is that no two such attributes can have the same value in a conformant document, regardless of the type of the elements that carry them; whatever the document language, an ID typed attribute can be used to uniquely identify its element.

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

但也许您可以将一个菜单项和一个 div 包含在一个具有相同 ID 的元素中？否则，您只能使用 JavaScript。