step13. 01~02. css weight
<style>
/* 단계적으로 적용되는 css 법칙 확인하기*/
p{
background-color: red;
}
/* 선택자의 가중치(구체적)가 동일 하다면 나중에 정의한 css 가 적용된다. */
p{
background-color: yellow;
}
</style>
</head>
<body>
<p class="myClass">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum eaque minima inventore nulla molestias, quam corporis iusto, rerum labore consectetur saepe ex nam neque asperiores delectus aliquam deleniti, magnam accusantium.</p>
</body>
- css는 가중치가 동일하다고 가정한다면 나중에 정의한 것이 적용된다. 이것이 첫 번째 원칙이다. 무조건은 아니다. 예를 들어, 동일한 변수명에 다른 숫자를 넣는다면 나중에 선언한 변수가 적용되는 것으로 빗대서 이해할 수 있을 것 같다.
<style>
/*
[ css 가중치 정리 ]
1. css 는 선택자가 상세할수록 가중치가 크다.
2. 가중치가 같으면 나중에 정의한 css 가 적용된다.
요소명 선택자 가중치 : 1점
클래스 선택자 가중치 : 10점
아이디 선택자 가중치 : 100점
인라인 css 가중치 : 1000 점
!important 가중치 : 10000점
*/
li{ background-color: yellow; } /* 1 */
ul li{ background-color: blue; } /* 2 */
.active{ background-color: green; } /* 10 */
li.active{ background-color: red; } /* 11 */
#one{ background-color: pink; } /* 100 */
#one{ background-color: white !important; } /* 10000 */
</style>
</head>
<body>
<div class="wrapper">
<div class="nav">
<ul>
<li style="background-color: #999;" class="active" id="one">하나</li>
</ul>
</div>
</div>
</body>
- 하지만 css의 selector(선택자)가 상세할수록 가중치가 커진다. 먼저 작성되고, 나중에 작성되는 것과는 별개이다. 이 조건이 우선한다. 가중치는 !important > inline css > id > class > element 의 순서로, 예시에 표기된 점수는 그냥 예시일 뿐이고 순서의 계층을 뛰어 넘을 수는 없다.
- 수업 때 id와 class를 동시에 쓰면 어떻게될까를 고민했었으나, 그럴 필요가 없다는 답변을 받았고 이해했다.
댓글