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更改为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＆＃39;回答有效 - 但是，我不知道这是否限制了一些可以用它完成的事情。这是它的外观：

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

Answer 1

来自CSS Selectors Level 3

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

使ID类型属性特殊的原因是，无论承载它们的元素的类型如何，在符合的文档中没有两个这样的属性可以具有相同的值;无论文档语言如何，ID类型属性都可用于唯一标识其元素。

因此，您无法在两个元素上设置相同的ID。

但也许您可以将一个菜单项和一个div放在一个具有相同ID的元素中？否则，只留下JavaScript。

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

1 个答案: