:target伪选择器未选择target

Question

请原谅，如果有人发布了关于相同问题的帖子，我无法找到类似问题的答案。

当我用#dotNetComponents url点击我的按钮时，它会把我带到带有dotNetComponents ID的div，但是有点太远了，去掉了标题和一些文本。我相信原因是因为我的粘性标题，但我不是100%确定这一点。无论如何，我需要在目标的顶部添加一个缓冲区，这样div就不会被截断。在四处搜索后，我发现下面的css，它似乎应该是正确的。当我将css从:target改为:hover时，当我将鼠标悬停在带有ID的div上时，我可以看到页面正在进行更改。因此，问题出在:target选择器本身。请帮帮忙。

这是我的html的简化版本：

<a href="#dotNetComponents" class="btn transformBtn">.NET COMPONENTS</a>

<div id="dotNetComponents" class="interiorContent container offsetAnchor">
</div>

下面是css：

 #dotNetComponents:target::before { 
   display: block; 
   content: " "; 
   margin-top: -110px;
   height: 110px; 
   visibility: hidden; 
   pointer-events: none;
 }

Answer 1

CSS滚动

如果您使用链接只是为了在页面内导航，则不需要:target，也不需要::before。

以下演示中的：

• 块元素围绕目标元素(例如前面提到的<article>)
• The元素具有以下必需属性：

从链接滚动时的一个常见问题是，目标元素可能离链接太近--请注意，目标元素的margin-top/bottom为100vh。页边距的大小由您决定，但我建议使用将目标推出屏幕的页边距。此外，如果目标元素在页面的底部，它将只向上滚动到它的margin-bottom或父元素padding-bottom。

overflow-y:滚动；/*添加一个持久的垂直滚动条*/滚动行为:平滑；/*设置滚动动画*/高度: 150px；/*只要高度固定，就会发生变化。*/

​

​

演示

​

nav a {
  font-size: 15vh;
  width: 30%;
  display: inline-block;
  text-align: center
}

article {
  overflow-y: scroll;
  scroll-behavior: smooth;
  height: 150px;
}

section {
  margin: 100vh auto;
  height: 110px;
  line-height: 110px;
  border: 3px solid #000;
  font-size: 15vh;
  text-align: center;
}

<nav>
  <a href="#A">A</a>

  <a href="#B">B</a>

  <a href="#C">C</a>
</nav>
<article>
  <section id="A">A</section>
  <section id="B">B</section>
  <section id="C">C</section>
</article>

​