찾다
웹 프론트엔드CSS 튜토리얼CSS 의사 클래스 : : 아님 () 및 : 대상

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

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

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

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

의사 클래스를 조작함으로써 JavaScript에 의존하지 않고 기능적 탭 인터페이스를 작성할 수 있습니다. 탭을 클릭하면 URL 조각이 업데이트되어 해당 탭 컨텐츠에서
    스타일을 트리거하여 보이는 레이어가됩니다.
  • :not() : 가있는 요소 제외 의 힘은 스타일 규칙에서 요소를 배제하는 능력에 있습니다. 그러나 단일 인수 만 수락하는 현재 제한은 다중 제외에 대한 체인이 필요합니다. 예를 들어,
  • 는 라디오 버튼, 확인란 및 범위 입력을 제외한 모든 입력 요소를 선택합니다. 미래의 CSS 사양은 개선 된 기능을 약속하여
  • 내에서 쉼표로 구분 된 인수를 허용합니다. :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

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

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

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

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
스크린 독자를 탈취시킵니다. 액세스 가능한 양식 및 모범 사례스크린 독자를 탈취시킵니다. 액세스 가능한 양식 및 모범 사례Mar 08, 2025 am 09:45 AM

이것은 우리가 양식 접근성에 대해 한 작은 시리즈의 세 번째 게시물입니다. 두 번째 게시물을 놓친 경우 "사용자 초점 관리 : Focus-Visible"을 확인하십시오. ~ 안에

Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성Mar 07, 2025 am 11:33 AM

이 튜토리얼은 Smart Forms 프레임 워크를 사용하여 전문적인 JavaScript 양식을 작성하는 것을 보여줍니다 (참고 : 더 이상 사용할 수 없음). 프레임 워크 자체를 사용할 수 없지만 원칙과 기술은 다른 형태의 건축업자와 관련이 있습니다.

WordPress 블록 및 요소에 상자 그림자를 추가합니다WordPress 블록 및 요소에 상자 그림자를 추가합니다Mar 09, 2025 pm 12:53 PM

CSS Box-Shadow 및 개요 속성은 주제를 얻었습니다. 실제 테마에서 어떻게 작동하는지에 대한 몇 가지 예와 이러한 스타일을 WordPress 블록 및 요소에 적용 해야하는 옵션을 보자.

GraphQL 캐싱 작업GraphQL 캐싱 작업Mar 19, 2025 am 09:36 AM

최근에 GraphQL 작업을 시작했거나 장단점을 검토 한 경우 "GraphQL이 캐싱을 지원하지 않음"또는

첫 번째 맞춤형 전환을 만듭니다첫 번째 맞춤형 전환을 만듭니다Mar 15, 2025 am 11:08 AM

Svelte Transition API는 맞춤형 전환을 포함하여 문서를 입력하거나 떠날 때 구성 요소를 애니메이션하는 방법을 제공합니다.

고급스럽고 멋진 커스텀 CSS 스크롤 바 : 쇼케이스고급스럽고 멋진 커스텀 CSS 스크롤 바 : 쇼케이스Mar 10, 2025 am 11:37 AM

이 기사에서 우리는 스크롤 바의 세계로 뛰어들 것입니다. 너무 화려하게 들리지는 않지만 잘 설계된 페이지가 손을 잡고 있습니다.

쇼, 말하지 마십시오쇼, 말하지 마십시오Mar 16, 2025 am 11:49 AM

웹 사이트의 컨텐츠 프레젠테이션을 설계하는 데 얼마나 많은 시간을 소비합니까? 새 블로그 게시물을 작성하거나 새 페이지를 만들 때

NPM 명령은 무엇입니까?NPM 명령은 무엇입니까?Mar 15, 2025 am 11:36 AM

NPM 명령은 서버 시작 또는 컴파일 코드와 같은 것들에 대한 일회성 또는 지속적으로 실행되는 프로세스로 다양한 작업을 실행합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전