ΛneOK v4 blog

일상의 잡다한 생각과 내용을 글 또는 사진으로 표현하는 일상 블로그입니다.

# Side Menu
  • recentPost

  • popularPost

  • Archive

  • recentComment

Study/Html_Css

CSS 선택자(Selector) 우선순위

2019. 9. 5., AneOK
728x90

기억해야 할 기본 CSS

스타일을 적용하는 데는 다양한 방법이 있으며 동시에 여러 가지 방법을 사용할 수도 있기 때문에 엘리먼트에 적용되는 스타일이 충돌할 수도 있습니다. 따라서 스타일 적용의 우선순위 규칙을 알아둘 필요가 있습니다.

선택자(Selector) 우선순위

1.속성값 뒤에! important를 붙인 속성

사용자 스타일시트 우선

!important 선언을 한 사용자 스타일 ! important 선언을 한 작성자 스타일 >
작성자 스타일 > 사용자 스타일 > User Agent 선언 (브라우저 자체의 선언)

2. HTML에서 style을 직접 지정한 속성

3. #id로 지정한 속성

4. .클래스, :추상클래스로 지정한 속성

5. 태그이름으로 지정한 속성

6. 상위 객체에 의해 상속된 속성

 

# 같은 우선순위에 있는 경우 나중에 선언한 것이 우선 되어 적용됩니다. # 절대적으로 우선 순위에 하고 싶다면 속성 값 뒤에 `!important` 를 사용하면 된다.

 

aneok Test.

<p class=aaa>aneok Test.</p>

p.aaa {color: blue;}
p.aaa {color: red;}

클래스가 같고 그 값이 다를 경우 뒤에 있는 것이 앞에 값을 덮는다.

aneok-01 Test.

aneok-02 Test.

<p class="ccc ddd">aneok-01 Test.</p> <!-- ddd가 선택된다 -->
<p class="ddd ccc">aneok-02 Test.</p> <!-- ddd가 선택된다 -->

.ccc {color: blue;}
.ddd {color: red;}

클래스 속성의 값을 aaa bbb로 하든 bbb aaa로 하든, CSS에서 .aaa를 먼저 .bbb를 나중에 정의했으므로 .bbb가 적용됩니다.

AneoK

AneoK

AneoK

<p id="wrap" class="wrap" style="color:blue">AneoK</p>
<p id="wrap" class="wrap">AneoK</p>
<p class="wrap" id="wrap">AneoK</p>

p { color: gray;}
p#wrap { color: red;}
p.wrap { color: black;}

1번째 줄은 2번의 '2. HTML에서 style을 직접 지정한 속성'에 해당하고 2,3번째 줄은 id값이 우선인 것을 해당합니다.

 

...

삽입 위치 우선순위

1. <head> 요소 안의 style 요소

2. <style> 요소안의 @import 문

3. <link> 요소로 연결된 CSS 파일

4. <link> 요소로 연결한 CSS 파일 안의 @import 문

5. 최종 사용자가 연결한 CSS 파일

6. 브라우저의 기본 스타일시트

여러 CSS파일이 같은 우선순위 위치에서 연결되고 삽입되어 있을 때는 연결/삽입 순서에 따라 우선순위가 결정된다. 가장 마지막에 연결/삽입된 스타일시트가 앞의 스타일시트보다 우선순위가 높다.

 

마치며

여기까지는 css의 기본 우선순위 알아보았습니다.

관련 문서 바로가기

728x90