css - 在 CSS 中使用 "target"时显示所有内部 block

Question

我在 HTML/CSS 中创建了标签。这些选项卡是点击时指向 block (“div”)的超链接。不知道为什么内部 block (子 block )的内容不显示。

<div id="contents">
    <div id="content1">
        <div>content not displayed</div>
    </div>
    <div id="content2"> content displayed </div>
    <div id="content3"> content displayed</div>
</div>

Answer 1

问题似乎来自 CSS。你有:

#contents div {
    border: 1px black dotted;
    display: none;
} 
#contents div:target {
    display: block;
}

将所有 div 隐藏在内容及其子项中，当目标时，您只更改 div 的显示，而不是子项。因此 content1 中的 div 永远不会显示。

有很多方法可以解决这个问题。

一种方法是只隐藏#contents 的直接子级:

#contents>div {
    border: 1px black dotted;
    display: none;
} 

另一种方法是只隐藏具有 id 的 div :

#contents div[id] {
    border: 1px black dotted;
    display: none;
}