Concreteness

<title>0430 구체성</title>

/* css 구체성  1. 가까운 조상 2.소스의 순서(아래, 가장 최근) 3.구체성 점수  3가지 종합해서 결정 // 3.구체성 점수가 우선 / 이후 1 2
인라인 아이디 클래스 태그
0        1       1    1             : #wrap .color p (빨)

0        0       1     1            : color p  (노)

> 빨간색 적용

인라인으로 직접 쓰면 무조건 먹는다. 인라인은 웹표준에서 지양.

*/
#wrap ul li:nth-child(1) {color:purple !important; } /* 구체성 무시 */
#wrap ul li:nth-child(1) {color:blue;font-size:12px !important }  /* 구체성 점수 0 1 1 2 */
ul li {color:green }                     /* 구체성 점수 0 0 0 2  */
ul li:nth-child(1) {color:gray; }        /* :  :: 가상클래스 * 구체성 점수 0 0  1  2  */
body li {color:red; }                    /* 구체성 점수 0 0 0 2  */
body { font-size: 30px; }

<li>구체성이란 css가 적용되는 우선권을 말함</li>
<li>1. 하드웨어 important 속성: 시각장애인용 기기</li>
<li>2. 소스상의 important 속성 </li>
<li>3. 하드웨어 일반 속성</li>
<li>4. 소스상의 일반 속성: 우리가 고민할 구체성 순위</li>
<li>important는 하드웨어 일반 속성보다 우선시 되기 때문에 사용을 자재하는 것이 좋다.</li>

<li>구체성: 인라인 아이디 클래스 태그 </li>
<li> 예) #wrap .color p:nth-child(2) 구체성 : 0 1 2 1</li>

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.