반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css기초3 - 선택자의 우선순위 점수</title>
<style>
/*선택자에는 우선순위라는 개념이 있다.
css에서는 위에서 아래의 흐름보다 우선순위 점수가 더 먼저 적용된다.
선택자의 우선순위 점수는 합산된다.*/
div.box #title1{color:salmon;}
/*div 태그(1점) + 클래스 태그(10점) + id 태그(100점) = 111점 : 우선순위 점수가 제일 높음*/
.box #title1{color:gold;}
/*클래스 태그는 10점, id 태그는 100점 이므로 점수 합산으로 110점*/
div #title1{color:purple;}
/*div 태그는 1점, id 태그는 100점 이므로 점수 합산으로 101점이라서 위에 있어도 합산 점수가 아래에 있는 100점(스카이블루)보다 높기 때문에 보라색으로 반영된다.*/
#title1{color:skyblue;}/*선택자를 아이디 태그로 선택 = 우선순위 점수 100점*/
.title2{color:orange;}
/*선택자를 클래스 태그로 선택 = 우선순위 점수 10점
클래스태그가 제일 상단에 있음에도 불구하고 우선순위 점수가 높아서 클래스 태그가 우선 반영된다.*/
h1{color:blue;}/*선택자가 태그명으로 선택 = 우선순위 점수 1*/
h1{color:red;}/*선택자가 태그명으로 선택 = 우선순위 점수 1점*/
h1{color:blue!important}
h1{color:green!important}/*important 가 최강! 모든 우선순위를 무시하고 이긴다!*/
</style>
</head>
<body>
<div class="box">
<h1 style="color:red" id="title1" class="title2">TITLE1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>TITLE2</h1>
<ul>
<li>
<h1>TITLE3</h1>
선택자를 태그명으로 선택할 경우 우선순위점수 1점</li>
<li>선택자를 클래스명으로 선택할 경우 우선순위점수 10점</li>
<li>선택자를 아이디명으로 선택할 경우 우선순위점수 100점</li>
<li>인라인스타일방식(태그마다 직접 스타일을 입력하는 방법)으로 스타일을 지정한 경우 우선순위점수 1000점</li>
</ul>
</div>
</body>
</html>반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [CSS] 스타일 상속 및 Font 관련 CSS 속성(2021-09-28) (0) | 2021.11.18 |
|---|---|
| [HTML] CSS 기초 - 블록라벨/인라인구조, 스타일 상속, CSS 파일 분리방법(2021-09-23) (0) | 2021.11.17 |
| [HTML] CSS 기초 - 관계선택자_족보관계를 이용(2021-09-16) (0) | 2021.11.09 |
| [HTML] CSS 기초 - 선택자(2021-09-16) (0) | 2021.11.09 |
| [HTML] 예제풀기(2021-09-14) (0) | 2021.11.09 |