캐스케이딩

다음과 같이 li에서 색 지정, id태크로 색지정, 클래스명으로 색지정, style로써 직접 색지정
을 했을 경우 어떤것이 우선순위가 되어 적용될까?

<!DOCTYPE html>
<head>
    <style>
        li{color:red}
        #idsel{color:blue}
        .classsel{color: green;}
    </style>
</head>
<body>
    <ul>
        <li>html</li>
        <li id="idsel" class="classsel" style="color:powderblue">css</li>
        <li>javascript</li>
    </ul>   
</body>
</html>

cascading우선순위1

그럼 이번엔 이렇게 해보면 어떻게 될까?

<!DOCTYPE html>
<head>
    <style>
        li{color:red}
        #idsel{color:blue}
        .classsel{color: green;}
    </style>
</head>
<body>
    <ul>
        <li>html</li>
        <li id="idsel" class="classsel">css</li>
        <li>javascript</li>
    </ul>   
</body>
</html>

cascading우선순위2

그럼 이번엔 이렇게 ?

<!DOCTYPE html>
<head>
    <style>
        li{color:red}
        .classsel{color: green;}
    </style>
</head>
<body>
    <ul>
        <li>html</li>
        <li id="idsel" class="classsel">css</li>
        <li>javascript</li>
    </ul>   
</body>
</html>

cascading우선순위3

그러하다..

태그내에서 style 직접지정이 1순위
id태그 지정이 2순위
class태그 지정이 3순위
일반 태그 지정이 4순위

가 된다.

만약 우선순위를 임의로 1순위로 만들고 싶을 때에는
!important를 쓴다.

<!DOCTYPE html>
<head>
    <style>
        li{color:red !important;}
        #idsel{color:blue}
        .classsel{color: green;}
    </style>
</head>
<body>
    <ul>
        <li>html</li>
        <li id="idsel" class="classsel" style="color:powderblue">css</li>
        <li>javascript</li>
    </ul>   
</body>
</html>

cascading우선순위임의지정

Tech Stock

CSS

캐스케이딩