>  기사  >  웹 프론트엔드  >  대상 의사 클래스 선택자는 무엇입니까? CSS 사용 방법:대상 선택기

대상 의사 클래스 선택자는 무엇입니까? CSS 사용 방법:대상 선택기

云罗郡主
云罗郡主앞으로
2018-11-19 10:48:474164검색

이 글의 내용은 대상 의사 클래스 선택자가 무엇인지에 관한 것입니다. css:target 선택기 사용 방법에는 특정 참조 값이 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

대상 선택기 소개

: 대상 선택기는 페이지에서 대상 요소를 선택하는 데 사용됩니다. 그렇다면 대상 요소는 무엇입니까? 직설적으로 말하면 대상 요소는 요소의 ID가 페이지의 하이퍼링크로 사용된다는 것입니다. 이해하기 어렵나요? 모두가 먼저 먹어볼 수 있는 요리를 준비합시다.

예:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 :target选择器</title>
    <style type="text/css">
        :target h3
        {
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#music">推荐音乐</a><br />
        <a href="#movie">推荐电影</a><br />
        <a href="#article">推荐文章</a><br />
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="music">
        <h3>推荐音乐</h3>
        <ul>
            <li>林俊杰-被风吹过的下图</li>
            <li>曲婉婷-在我的歌声里</li>
            <li>许嵩-灰色头像</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="movie">
        <h3>推荐电影</h3>
        <ul>
            <li>蜘蛛侠系列</li>
            <li>钢铁侠系统</li>
            <li>复仇者联盟</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="article">
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
</body>
</html>

효과는 다음과 같습니다.

대상 의사 클래스 선택자는 무엇입니까? CSS 사용 방법:대상 선택기

분석:

앵커 링크를 클릭하면 해당 대상 요소 아래 h3 태그의 글꼴 색상이 빨간색으로 변경됩니다.

: 대상 선택기는 일반적으로 독자에게 더 나은 탐색 효과를 제공하기 위해 앵커 링크와 함께 사용됩니다. 이는 또한 사용자 경험에 대한 매우 좋은 접근 방식입니다.

위의 대상 의사 클래스 선택자는 무엇입니까? css:target 선택기 사용 방법에 대한 전체 소개입니다. CSS3 Tutorial에 대해 더 알고 싶다면 PHP 중국어 웹사이트에 주목하세요.


위 내용은 대상 의사 클래스 선택자는 무엇입니까? CSS 사용 방법:대상 선택기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 lvyestudy.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제