Псевдоселектор :target не выбирает цель
Простите меня, если кто-то написал о той же проблеме, я не смог найти похожую проблему с ответом.
Когда я нажимаю кнопку с URL-адресом #dotNetComponents, я перенаправляюсь в div с идентификатором dotNetComponents, но захожу слишком далеко, обрезая заголовок и часть текста. Я считаю, что причина в моем липком заголовке, но я не уверен в этом на 100%. В любом случае, мне нужно добавить буфер в верхнюю часть цели, чтобы ни один из div не был обрезан. После поиска я нашел CSS ниже, похоже, он должен работать правильно. Когда я изменил css с :target на :hover, я смог увидеть, как страница активно вносит изменения при наведении курсора на 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;
}
Ответы 1
CSS прокрутка
Если вы используете ссылку только для навигации по странице, :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>
Он выглядит и кажется работающий в порядке, возможно, у вас что-то еще мешает.