1. 후자 우선순위
2. 구체성(명시도) 우선순위
3. 중요성의 원칙
* 전체 선택자의 가중치는 0으로 가장 낮다.
자손 / 형제 / 직계 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<style>
/* 차이가 명확하게 있으므로 구분을 해야된다. */
/* 자손 */
div p {
color: red;
}
/* 형제 */
div+p {
color: blue;
}
/* 직계자식 바로 밑에 p태그가 있어야 된다. 손자같은 경우는 포함 x */
div>p {
color: green;
}
</style>
<body>
<div>
<!-- green -->
<p>hello world</p>
</div>
<div>
<section>
<h2>hello</h2>
<!-- red -->
<p>hello world</p>
</section>
</div>
<!-- blue -->
<p>helloworld</p>
</body>
</html>
구체성의 원칙
class가 아무리 동등한 점수를 가져간다고 해도 id의 우선순위를 이길 수 없다.
물론 type선택자가 아무리 많아져서 점수가 11점이 된다고 해도 class를 이길 수 는 없다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<head>
<!-- 우선순위(가중치) id > class > type -->
<!-- cascading과 상관 없이 우선순위가 정해져 있다. -->
<style>
.yellowgreen {
color: yellowgreen;
}
#fourth {
color: skyblue;
}
h1 {
color: red;
}
/* #testid1 {
color: aquamarine
} */
.testclass1.testclass2.testclass3.testclass4.testclass5.testclass6.testclass7.testclass8.testclass9.testclass10 {
color: black;
}
/* .testclass */
</style>
</head>
<body>
<h1>h1의 첫번째</h1>
<h1 class='yellowgreen'>h1의 두번째</h1>
<h1 class='yellowgreen'>h1의 세번째</h1>
<h1 id='fourth' class='yellowgreen'>h1의 네번째</h1>
<!-- 이런 경우에는 우선순위가 어떻게 될까? -->
<!-- id가 우선순위가 높다.
class선택자가 아무리 많더라도 id선택자의 우선순위를 넘지 못한다.라는 것을 기억하자-->
<!-- <h1 id="test1">ID</h1> -->
<h1 id=testid1
class="testclass1 testclass2 testclass3 testclass4 testclass5 testclass6 testclass7 testclass8 testclass9 testclass10">
hello
</h1>
</body>
</body>
</html>
선택자 유의사항
공백이 있는 경우에는 class1의 자식요소에서 class2를 찾는 것이고 공백이 없는 경우에는 동일한 요소에서 있는 class이름을 선택하는 것이다.
.class1 .class2 {
}
.class1.class2 {
}
중요도의 원칙
!important 이 가장 우선적으로 style이 적용된다.
'Programming > Style' 카테고리의 다른 글
| RESET CSS (0) | 2022.09.08 |
|---|---|
| CSS란? (0) | 2022.09.08 |
| CSS margin 겹침현상 (0) | 2022.09.08 |
| CSS Box-sizing (0) | 2022.09.05 |
| CSS 꼭 알아야 될 개념 (0) | 2022.09.02 |