CSS의 특성상 어떤 태그에 속성이 중복되어 설정될 수 있는데요,
CSS는 어떤 속성이 우선되어 적용되는지 미리 명시하고 있습니다.
우선순위는 아래와 같습니다.
- 속성 값 뒤에 !important 를 붙인 속성
- HTML에서 style을 직접 지정한 속성
- #id 로 지정한 속성
- .클래스, :추상클래스 로 지정한 속성
- 태그이름 으로 지정한 속성
- 상위 객체에 의해 상속된 속성
같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용됩니다.
!important
우선순위를 무시하고, 꼭 적용 시키고 싶은 속성이 있다면, 속성 값 뒤에 !important 를 붙여서 적용시켜주면 됩니다.
.normal { color: blue }
.compulsion{ color: black !important }!important 는 우선순위 뿐만 아니라 디자이너-개발자간 커뮤니케이션시 중요한 속성임을 알리는 뜻을 나타내기도 합니다.
예제
<html>
<head>
<style>
#my-box .text{ color: black }
.black{ color: red }
.important-black{ color: red !important }
</style>
</head>
<body>
<div id="my-box">
<div class="text">My text 1</div>
<div class="text black">My text 2</div>
<div class="text important-black">My text 3</div>
</div>
</body>
</html>출력 결과
My text 1
My text 2
My text 3
출처 : https://ofcourse.kr/css-course/%EC%A0%81%EC%9A%A9-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84
'Front-end > HTML, CSS' 카테고리의 다른 글
| codecademy - HTML, CSS, JavaScript 코스 (0) | 2021.08.02 |
|---|---|
| flexbox 연습 사이트 (0) | 2021.05.24 |
| CSS selector 연습 사이트 (0) | 2021.05.24 |
| em rem 정리 (0) | 2021.05.19 |
| Responsive CSS Units (%, EM, REM) (0) | 2021.05.18 |
