-
CSS - 상속과 우선순위프로그래밍/HTML & CSS 2021. 9. 16.반응형
상속이 가능한 놈과 불가능한 놈만 대략 적으로 알아두면 좋다.
우선순위 관련
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="style3.css"> <style type="text/css"> div { background: black; } </style> </head> <body> <h3>스타일 우선 순위</h3> <div> CSS가 어디에 선언 되었는지에 따라 우선 순위가 달라진다. </div> </body> </html>- div에 문구는 원래 link를 통해서 외부 css를 불렀기때문에 style3.css의 속성을 따라간다
하지만 본문에서 style을 다시 div에게 백그라운드 색깔을 검정으로 줬기때문에
검정으로 나온다.
이게 우선순위이다.
무조건 본문이 우선이다. 그리고 우선순위에도 어떤게 더 우선순위인지 알아야한다.(명시도)
- 명시도 순서 -
!important = 1순위
inline = 2순위
id = 3순위
클래스/어트리뷰/가상 선택자 = 4순위
태그 = 5순위
전체 선택자 = 6순위
상위 요소 상속 = 7순위
기본 = 맨 마지막그리고 본문에서도 나중에 선언한 스타일이 먼저 적용이 된다.
반응형'프로그래밍 > HTML & CSS' 카테고리의 다른 글
CSS - 기초(3) 가상 클래스 / 링크 셀렉터 (0) 2021.09.16 CSS - 기초(2) / 선택자 (0) 2021.09.16 CSS - 단위 (0) 2021.09.16 CSS 기초(1) / 외부css 파일 가져오기 (0) 2021.09.16 HTML - form 관련 태그 / 파일 태그 (0) 2021.09.16
