쿠...sal: [컴][웹] CSS 의 선택자 우선순위 priority

css priority / css selector priority

우선순위는 ref. 4 에 잘 나와 있다.

상위 class 에 대한 조건이 있는 경우에, 예를 들면 아래와 같은 경우에 그냥 .hello 보다 .hi .hello 가 우선순위를 갖게 된다. css 는 좀 더 자세한 항목에 대한 css 가 우선순위를 갖기 때문이다.

.hi .hello {...} /* hi 밑에 hello 가 있는 경우 */

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>

        .hi .hello{
            color:green;
        }

        .hello{
            color:black;
        }

    </style>

</head>

<body>

    <div class="hi">
        <div class="hello">test css</div>
    </div>

</body>

</html>

위의 경우에 "test css" 라는 글자는 녹색이 된다.

References

CSS 적용 우선순위
CSS 선택자(Selector)와 우선 순위
css 우선순위에 대한 정리 - Codeflow: Programming Q&A Forum
css 에서 우선순위 - css order priority

쿠...sal

[컴][웹] CSS 의 선택자 우선순위 priority

References

댓글 없음:

댓글 쓰기