스타일 우선순위 : 태그 < class < id
스타일에서 아이디
- #으로 표현
- 한 페이지 내에서 겹치지 않게 하나만 사용!
- 스타일 우선순위 높음
- 자바스크립트에서 선택자 잡아내기 빠르다
스타일에서 클래스
- 다중 객체의 스타일 적용에 최적화 -> 부트스트랩 (공통 클래스 기능 최적화)
선택자
후손 선택자 : 공백으로 표기
자손 선택자 : 에밋과 동일 ( '>'로 표기 )
<style>
#gnb li + li{ background-color: yellow; }
/* 첫번째 li를 제외한 그 다음 li '모두'에 CSS style 적용 */
#gnb li:not(:first-chile){} /* 위와 동일 */
#gnb li:first-child + li{} /* 첫번째 li를 제외한 그 다음 li에 CSS style 적용 */
#gnb li:first-child a{}
#gnb li:nth-child(2) a{}
#gnb li:nth-child(2n) a{} /* 짝수만 CSS 적용 */
#gnb li:not(.gnb3) a{ color:red; } /* class .gnb3 제외하고 CSS style 적용 */
</style> + 선택자 : 바로 아래에 위치한 (동생) 태그 하나
~ 선택자 : 나를 제외한 동생'들'
:nth-child(순번) : 번째 객체
:not (제외객체) : 해당 태그를 제외한 객체 모두
