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

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

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

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

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

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

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

조각 식별자 (예를 들어,

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

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 클래스는 클래스를 가진 것들을 제외하고 양식 레이블을 스타일링하여 시연합니다.

체인 는 다음과 같이 여러 요소 유형을 제외 할 때 중요합니다. aria-hidden 이것은 라디오, 확인란 및 범위를 제외하고 모든 입력 유형을 효율적으로 대상으로합니다.

faqs on 선택기 : 이 섹션에서는

선택기, 기능, 브라우저 지원 및 다양한 CSS 선택기의 사용에 관한 일반적인 질문에 대한 답변을 제공합니다. 답은 원래 텍스트의 답변과 비슷하지만 명확성과 간결함을 위해 다시 게시합니다.

위 내용은 CSS 의사 클래스 : : 아님 () 및 : 대상의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!