CSS 의사 클래스 : : 아님 () 및 : 대상-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS 의사 클래스 : : 아님 () 및 : 대상

Christopher Nolan

Feb 19, 2025 am 11:29 AM

이 기사는 다재다능한 CSS 의사 클래스

및 :not() :target 주요 개념 :

CSS Pseudo-classes: :not() and :target 의사 클래스는 필터 역할을하며, 를 제외하고 모든 요소를 선택하여 주어진 선택기와 일치하는 모든 요소를 선택합니다. 이를 통해 스타일링 규칙에서 요소를 정확하게 제외 할 수 있습니다.

pseudo 클래스는 특정 URL 조각 ( 기호 다음 부분)에 해당하는 문서 섹션을 강조합니다. 이를 통해 JavaScript가없는 대화식 요소를 생성 할 수 있습니다 : 가있는 javaScript가없는 탭 URL 조각을 영리하게 조작하고

의사 클래스를 조작함으로써 JavaScript에 의존하지 않고 기능적 탭 인터페이스를 작성할 수 있습니다. 탭을 클릭하면 URL 조각이 업데이트되어 해당 탭 컨텐츠에서

:not() : 가있는 요소 제외 의 힘은 스타일 규칙에서 요소를 배제하는 능력에 있습니다. 그러나 단일 인수 만 수락하는 현재 제한은 다중 제외에 대한 체인이 필요합니다. 예를 들어,
내에서 쉼표로 구분 된 인수를 허용합니다. :target # Tiffany B. Brown의 "CSS Master"에서 발췌. 서점과 전자 책으로 제공됩니다 이 섹션에서는 아동-인덱스 및 타이핑 아동-인덱스 의사 클래스 (문서 트리의 위치에 따라 요소 선택) 및 입력 의사 클래스 (값 및 상태를 기준으로 양식 필드를 타겟팅)를 포함하여 고급 의사 클래스를 탐색합니다.

조각 식별자 (예를 들어,

, )는 인 페이지 내비게이션에 사용됩니다. :target 이 스타일은 ID가 URL 조각과 일치 할 때 노란색 배경으로 주석입니다.

CSS Pseudo-classes: :not() and :target CSS 전용 탭 생성 :

pseudo 클래스는 JavaScript가없는 탭을 만드는 핵심입니다. 상태를 기반으로 값을 설정하면 선택한 탭 만 표시되는지 확인합니다.

:target 접근성 팁 : z-index 더 나은 접근성을 위해 속성을 관리하기 위해 JavaScript를 사용하는 것을 고려하십시오. :target

행동 중 :

.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}

<div class="tabbed-widget">
  <div class="tab-wrap">
    <a href="https://www.php.cn/link/7426f79c9a7f5af0a6cc457b2a7fb195">Tab 1</a>
    <a href="https://www.php.cn/link/60430f4a984aa0a534e027339a7580a7">Tab 2</a>
    <a href="https://www.php.cn/link/9d4f684ba088d28ad1c2ae7d0aee496a">Tab 3</a>
  </div>
  <ul class="tab-body">
    <li id="tab1"><p>This is tab 1.</p></li>
    <li id="tab2"><p>This is tab 2.</p></li>
    <li id="tab3"><p>This is tab 3.</p></li>
  </ul>
</div>

pseudo 클래스는 클래스를 가진 것들을 제외하고 양식 레이블을 스타일링하여 시연합니다. CSS Pseudo-classes: :not() and :target