*= 속성 선택자 사용법

JooKit 주킷 2021. 6. 2. 18:18
목차 접기
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS기초-15(속성선택자-7)</title>
    <style>
        ul {
            list-style-type: circle;
        }

        a {
            font-size: 14px;
            color: blue;
            text-decoration: none; 
        }

        /* w3라는 값이 포함이 되어 있다면, 링크 텍스트에만 별도로 스타일을 적용시킨다. */
        [href *= "w3"] {
            background-color: blue;
            color: white;
        }

    </style>
</head>
<body>
    <h2>HTML5 참고 사이트</h2>
    <p>(아래 링크 중에 파란색 배경의 링크는 W3C사이트로 연결됩니다.</p>
    <ul>
        <li><a href="http://www.w3c.org/TR/html"  >HTML 표준안 사이트</a></li>
        <li><a href="http://www.webplatform.org"  >튜토리얼과 아티클</a></li>
        <li><a href="http://www.caniuse.com"  >HTML 지원 여부 체크</a></li>
    </ul>
</body>
</html>
728x90
반응형
LIST