선택자 우선순위
기본적으로 CSS는 위에서 부터 아래로 적용 ( 마지막에 작성된 스타일이 반영)
단, 동일한 요소를 다양한 선택자로 스타일을 부여했을 경우 작성순서에 관계없이 우선순위에 따라 적용
태그 선택자-> 클래스 선택자-> 아이디 선택자 -> 인라인스타일방식 -> !important
<style>
h1{
background-color: pink;
color:yellow
}
h1{
background-color: green;
}
#id1{background-color: pink;}
.class1{background-color: aquamarine;/*반영안됨 (아이디선택자우선순위가 더높기때문)*/
color:white}
div{
background-color: teal !important; /* !important가 최우선순위*/
color:rebeccapurple; /*태그선택자 우선순위 마지막*/
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div id="id1" class="class1" style="background-color:wheat;">우선순위 테스트</div>
</body>우선순위 테스트
'Front > CSS' 카테고리의 다른 글
| CSS 05. 텍스트 관련 스타일 (0) | 2022.12.12 |
|---|---|
| CSS 04. 글꼴관련 스타일 (0) | 2022.12.09 |
| CSS 02. 기타 선택자 (2) (0) | 2022.12.09 |
| CSS 02. 기타 선택자 (1) (0) | 2022.12.09 |
| CSS 01. 기본선택자 (0) | 2022.12.09 |