css 使用目标打开另一个div，但div未显示

ngynwnxp 于 2022-12-24 发布在其他

关注(0)|答案(1)|浏览(165)

我使用的是目标伪类，因此当单击"Open"超链接时，它会显示#content div。然而，当单击超链接时，什么也不会发生。

#content {
  display: none;
}

.btn:target #content {
  display: block;
}

<a href="#content"><div class="btn">open</div></a>
    <div id="content">
    some content
    </div>

有人能帮我修修吗？

1条答案

这里有两个问题
1st：:target是一个伪选择器，用于选择目标元素。这意味着锚引用的元素，而不是锚点内的元素。
第二：您有一个特异性权重问题。id具有最高特异性，因此总是覆盖具有较低特异性的其他声明，即使如下所示。您可以通过使用属性选择器而不是ID选择器来降低特异性：

[id="content"] {
  display: none;
}

*:target {
  display: block;
}

<a href="#content"><div class="btn">open</div></a>
    <div id="content">
    some content
    </div>