CSS :target 의사 클래스 선택기의 다양한 응용 시나리오 구현

CSS의 다양한 응용 시나리오를 구현하려면 특정 코드 예제가 필요합니다.

CSS :target 의사 클래스 선택기는 일반적으로 사용되는 CSS 선택기로 앵커 포인트(# URL) ) 특정 요소를 선택합니다. 이 기사에서는 이 의사 클래스 선택기를 사용하는 몇 가지 실제 애플리케이션 시나리오를 소개하고 해당 코드 예제를 제공합니다.

1. 페이지 내 탐색 링크 스타일 전환:

사용자가 페이지의 탐색 링크를 클릭하면 :target 의사 클래스 선택기를 사용하여 현재 클릭한 탐색 링크에 스타일을 추가하여 사용자의 탐색 링크를 강조할 수 있습니다. 위치. 다음은 샘플 코드입니다.

HTML:

<ul class="navigation">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">Section 1 Content</div>
<div id="section2">Section 2 Content</div>
<div id="section3">Section 3 Content</div>

CSS:

.navigation a:target {
  font-weight: bold;
  color: red;
}

2. 모달 효과:

:target 의사 클래스 선택기와 CSS3 전환 효과를 사용하면 간단한 모달 효과를 얻을 수 있습니다. 다음은 샘플 코드입니다.

HTML:

<div class="modal" id="modal">
  <div class="modal-content">
    <h2>Title</h2>
    <p>Modal Content</p>
    <a href="#!" class="close-button">Close</a>
  </div>
</div>
<a href="#modal">Open Modal</a>

CSS:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.modal:target {
  display: block;
}

.modal-content {
  background-color: white;
  width: 300px;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close-button {
  text-align: center;
  display: block;
  margin-top: 20px;
}

3. 페이지를 지정된 섹션으로 스크롤합니다.

:target 의사 클래스 선택기와 스크롤 애니메이션 효과를 사용하면 해당 섹션으로 부드럽게 스크롤할 수 있습니다. 탐색 링크 클릭 시 페이지 섹션을 지정합니다. 다음은 샘플 코드입니다:

HTML:

<ul class="navigation">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">Section 1 Content</div>
<div id="section2">Section 2 Content</div>
<div id="section3">Section 3 Content</div>

CSS:

html,body {
  scroll-behavior: smooth;
}

#section1:target,
#section2:target,
#section3:target {
  padding-top: 100px; /* 调整目标节的位置，以免内容被导航遮挡 */
}

:target 의사 클래스 선택기를 사용하면 탐색 링크 스타일 전환, 모달 상자 효과, 부드러운 효과 등 다양한 실용적인 효과를 얻을 수 있습니다. 스크롤링 등등.. 이러한 시나리오는 실제 필요에 따라 확장하고 보다 창의적으로 사용할 수 있는 다양한 응용 프로그램 중 일부에 불과합니다. 이 글이 여러분의 공부와 실천에 도움이 되기를 바랍니다!

위 내용은 CSS :target 의사 클래스 선택기의 다양한 응용 시나리오 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!