：目标伪选择器不选择目标
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了：目标伪选择器不选择目标相关的知识，希望对你有一定的参考价值。
请原谅我，如果有人发布了同样的问题，我无法找到答案的类似问题。
当我用#dotNetComponents url单击我的按钮时，它会带我到dotNetComponents ID的div，但是走得太远，切断标题和一些文本。我相信原因是因为我的标头，但我并不是100％肯定这一点。无论如何，我需要在目标的顶部添加一个缓冲区，这样就不会切断任何div。搜索后，我发现下面的CSS，似乎它应该正常工作。当我将css从：target更改为：hover时，我能够看到页面在我将鼠标悬停在带有ID的div上时主动进行更改。因此，问题在于：目标选择器本身。请帮忙。
这是我的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;
答案
CSS Scrolling
如果您使用的链接只是在页面中导航，则不需要:target，也不需要::before。
在以下演示中：
- 块元素包裹在目标元素周围（例如，
<article>） - 前面提到的元素具有以下必需属性：
从链接滚动时的一个常见问题是目标元素可能太靠近链接 - 请注意目标元素具有100vh margin-top/bottom。边距的大小取决于您，但我建议使用一个边距将目标推离屏幕。此外，如果目标元素位于页面的底部，它将仅向上滚动到margin-bottom或父元素padding-bottom。
overflow-y: scroll; /* Adds a persistent vertical scrollbar */ scroll-behavior: smooth; /* Animates scrolling */ height: 150px; /* This varies as long as it's a fixed height. */
演示
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>以上是关于：目标伪选择器不选择目标的主要内容，如果未能解决你的问题，请参考以下文章