📌 형제선택자
🐣 일반 형제 선택자 결합 (~)
같은 부모를 가진 요소들중에서 본인보다 뒤에있는 형제만 선택가능
code ~ selector {
}🐣 인접 형제 선택자 결합 (+)
본인 바로 뒤에 해당하는 요소가 있으면 스타일 적용 (해당 태그 없으면 적용안됨)
code + selector {
}🐣 그룹화
여러개를 통일한 스타일을 적용하고 싶을 때 콤마이용해서 한꺼번에 쓰기
p, span, a {
}📌 범용 선택자
html에 있는 모든 요소 스타일 적용- 단독사용시 css 최상단에 쓰기 * { }
- 다른 선택자와 결합해서 사용가능
p + * {
}- 사실은 클래스, 아이디를 사용할 때 앞에
*.red*#red별표가 생략된거임
📌 상속 제어
🐣 initial
- 브라우저가 지정한 초기값으로 돌아감
- 상속을 끊을 수 있음
🐣 inherit
- 무조건 상속을 받아라 지정
all: inherit;
해당 요소에 설정된 모든 css값을 기본값으로 돌림
🐣 unset
- 부모로부터 상속받을 값이 있을 때 :
inherit - 부모로부터 상속받을 값이 없을 때 :
initial
all: unset;- 상속받을 값이 있는 속성은 무조건 상속 나머지는 기본값으로 돌아가게 함
- 여러가지 css파일을 써서 헷갈리는 경우 깨끗하게 초기화하고 부모한테서 받을 것만 받음
📌 우선순위
1. 선언된 곳
head에서 style을 앞에쓰는지, link를 앞에쓰는지에 따라 다름
얘네들 다 이기는 건 인라인스타일
2. 명시도
- 적용범위가 적을수록 명시도가 높은 것, 뚜렷하게 보여지는 것, 대상을 특정할 수 있는 것
#box {
color:blue;
}
.box {
color:red;
}클래스선택자가 밑에 선언됐는데도 불구하고 파란색이 적용되는 이유?
- 클래스 셀렉터보다 아이디 셀렉터 명시도가 높기 때문
- 클래스셀렉터 = attribute 셀렉터 = 수동셀렉터 같은 명시도 가짐
!important(모든값 다 이김, 불가피한 상황아니면 쓰지 않기) > inline style > ID > Class/Attribute/Pseudo Class > type > * > inherited
3. 코드의 위치
- 뒤쪽에 위치한 속성이 마지막에 덮어씌우게됨
