<style>
    #myid {
        background-color: red;
    }
    .important-background {
        background-color: yellowgreen !important; /* !important 선언 */
    }
</style>
<p id="myid" class="important-background">
    CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>
실제 적용된 모습
.important-background {
    background-color: yellowgreen !important; /* 이 배경색은 변경되지 말아야 합니다. */
}
<style>
    #myid {  /* 구체성 값 = 0,1,0,0 */
        background-color: red !important;
    }
    .important-background {  /* 구체성 값 = 0,1,0,0 */
        background-color: yellowgreen !important;
    }
</style>
<p id="myid" class="important-background">
    CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>
실제 적용된 모습
<style>
    .important-background {
        animation: bg-animation 3s infinite both;
    }
    @keyframes bg-animation {
        0% {
            background-color: red !important;
        }
        100% {
            background-color: yellowgreen;
        }
    }
</style>
<p class="important-background">
    CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>
실제 적용된 모습
<style>
    .important-background {
        border: 2px solid red !important;
    }
    .important-background:hover {
        border-color: blue; /* 작동하지 않음 */
    }

</style>
<p class="important-background">
    CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>
실제 적용된 모습 마우스를 올려 hover해 보세요.
border-color: blue;가 작동하지 않습니다.
<style>
    .important-background {
        /* border: 2px solid red !important; */
        border-width: 2px !important;
        border-style: solid !important;
        border-color: red !important;
    }
    .important-background:hover {
        border-color: blue; /* 작동하지 않음 */
    }

</style>
<p class="important-background">
    CSS !important 사용법 – 스타일 적용 우선 순위의 우선권 부여하기
</p>

caniuse.com에서 더 자세한 정보를 확인해 보세요.