CSS 적용 우선순위

서지우·2023년 6월 26일

HTML / CSS

목록 보기

9/12

기본 스타일

태그 들 중에는 기본적으로 스타일 시트가 내장 되어 있는 태그가 있다.
예를들어 h1~h6 태그는 폰트 사이즈가 커지는 스타일이 내장 되어 있다.

<h1>다람쥐 헌 쳇바퀴에 타고파</h1>

사용자 정의 스타일

기본 내장 스타일 시트보다 사용자 정의 스타일이 우선된다.

h1{
  font-size:16px;
  font-weight:normal;
}

가장 마지막에 작성한 스타일

아래와 같이 작성하면 p태그의 글자색은 orange가 된다.

p{color:red;}
p{color:blue;}
p{color:orange;}

태그와 가까운 스타일

인라인 스타일이 태그와 제일 가깝기 때문에 중복 될 경우 최우선으로 적용된다.

인라인 스타일

style 태그

CSS파일

점수

선택자마다 점수가 있다. 점수가 높은 스타일이 적용된다.

인라인 스타일 1000점

<div style="color: red;">인라인 스타일</div>

아이디 선택자 100점

<style>
  #title{
    color:green;
  }
</style>
<h1 id="title">아이디가 title 입니다</h1>

가상 클래스 선택자 10점

:hover 등

클래스 선택자 10점

<style>
  .content {
    color:red;
  }
</style>
<p class="content">클래스가 content 입니다.</p>

태그 선택자 1점

<style>
  p{
    color:blue;
  }
</style>
<p>안녕하세요.</p>

위의 코드!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #myDiv{
            background-color: red;
        }
        .my-div{
            background-color: blue;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div id="myDiv" class="my-div">클래스 아이디 우선순위 확인</div>
</body>
</html>

겹치기

스타일을 겹치면 점수가 올라간다.

<style>
  /* 2점 */
  nav > h2{}   
  /* 11점 */
  nav .title{} 
  /* 110점 */
  #main .sub{} 
  /* 11점 */
  a:hover{}
  /* 13점 */
  a:hover span::first-letter{} 
</style>

!important

!important 를 사용하면 무조건 최상위 점수가 된다.

/* 10000점 */
p{
  color:blue !important; 
}

서지우

미래가 기대되는 풀스택개발자 공부 이야기~~

이전 포스트

CSS 선택자

다음 포스트