CSS 타겟을 사용하는 방법

css 대상은 현재 활성 대상 요소를 선택하는 데 사용할 수 있는 ":target" 선택기를 참조합니다. 해당 사용 구문은 "#tab:target {color:blue}"와 같습니다. 이 문은 앵커 링크를 변경하는 것을 의미합니다. "#tab"을 가리키도록 요소 글꼴 색상은 파란색입니다.

이 튜토리얼의 운영 환경: windows7 시스템, css3 버전, thinkpad t480 컴퓨터.

권장: "css 비디오 튜토리얼"

css :target selector

URL 뒤에 앵커 이름 #이 오면 문서의 특정 요소를 가리킵니다. 연결된 요소가 대상 요소입니다.

:대상 선택기를 사용하여 현재 활성 대상 요소를 선택할 수 있습니다.

CSS3: 대상 의사 클래스는 페이지의 앵커 링크 URL이 가리키는 ID 요소의 스타일을 변경하는 데 사용됩니다. [관련 추천 : CSS 온라인 매뉴얼]

예를 들어 #tab을 가리키는 링크를 추적하는 요소의 글꼴 색상을 파란색으로 변경하려면 다음과 같이 작성하면 됩니다.

#tab:target {color:blue}

브라우저 지원:

IE8 아래 버전은 지원되지 않는 버전이며, IE9는 이 속성을 지원하며, Firefox, Chrome 등과 같은 IE 이외의 핵심 브라우저는 모두 이를 지원합니다.

사용법:

:target 의사 클래스는 :hover, :link, :visited, :focus 및 기타 의사 클래스와 사용법이 동일합니다.

:target {color:blue}

예: CSS3 :target 의사 클래스는 탭 전환 효과를 얻습니다

다음은 JavaScript를 사용하지 않는 탭 전환 효과를 만들기 위한 csse :target 사용 방법에 대한 간략한 소개입니다.

HTML 코드:

<div class="tablist">
<ul class="tabmenu">
<li>
<a href="#tab1">标签一</a>
</li>
<li>
<a href="#tab2">标签二</a>
</li>
<li>
<a href="#tab3">标签三</a>
</li>
</ul>
<div id="tab1" class="tab_content">tab1 content</div>
<div id="tab2" class="tab_content">tab2 content</div>
<div id="tab3" class="tab_content">tab3 content</div>
</div>

CSS 코드:

.tab_content {
position: absolute;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}

원리는 실제로 매우 간단합니다. 탭 요소를 절대 위치 절대값으로 변경한 다음 :target 의사 클래스 수준(z-index)을 통해 변경합니다.

위 내용은 CSS 타겟을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!