명시도,결합자 (유데미 강의, CSS완벽 가이드, 맥스 선생님 강의)

css(캐스케이딩 스타일 시트) 뜻 : 여러 스타일이 같은 요소에 적용될 수 있다는 뜻

따라서 충돌을 해결하기 위해 명시도라는게 존재함

 

명시도 이해하기

 

우선순위 (위에 있을수록 아래와 충돌시 위에것이 적용됨)

1. 인라인 스타일

2. id 선택자

3. 클래스, pseudo클래스, 속성 선택자

4. HTML 태그 선택

5. * 전역 선택

6. 브라우저의 기본 설정 값

 

같은 순위일경우 css 파일상 아래에 있는것이 적용됨

 

상속 이해하기

 

스타일은 자식요소에게 상속됨(모든 스타일이 되는 것은 아님)

그리고 상속의 우선순위는 브라우저 기본 설정 값 보다 낮음(즉, 최하단 명시도)

 

결합자

#product h1{

//내용

}

위 처럼 할 경우 product라는 클래스를 가진 요소 안에 있는 모든 h1에 적용됨

<div class='product'>

  <div><h1></h1></div>

</div>

위 처럼 직속 자식이 아니여도 적용됨

 

직속 형제 (+)

무조건 h2 바로 뒤에 와야함

 

일반 형제 (~)

h2 다음에 오는 p에 적용됨, 바로 뒤는 아니여도 됨

 

직속 자식 결합자 (>)

div 안에 있는 p에 적용됨, 단 div안 article 안 p에는 적용안됨(직속 자식만 가능)

 

일반 자식 결합자 ( )

자식이면 다 적용됨

 

 

 

강의,자료, 출처

https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/