css 선택자 우선 원칙은,
기본원칙은
-가장 밑에 선언된 녀석이 적용된다. 이전것은 덮어버림.
CSS 의 뜻이 뭐냐면
Cascading style sheet
즉
캐스캐이딩
폭포처럼 쏟아지는 흐르는 이라는뜻
즉, 덮어버린다는 뜻임.
그리고
한 태그에 클래스가 여러개있는거 쓸떄
하나만 안쓰고 두개를 쓰고싶을때는,
붙여서 써야된다
.box.box1.bpx2 {
}
이런식으로~
띄우면 적용이 안된다.
그리고
.lif.li1.li1-1, .lil{
list-style: none;
}
이런식으로
다른 클래스를 다중으로 넣어서 뭔가 적용시키려며
클래스1 클래스2 이사이에
쉼표를 넣어야 된다.
클래스1, 클래스2 {
}
이런식
아무튼
선택자 우선순위를 이어나가자면,
금메달
-!important
-id
은메달
-class
-Pseudo-class
동메달
-태그 ,(타입), 엘리먼트 선택자(다 같은말임)
즉,
예를들어
클래스가 15개 있어도
1개의 아이디를 우선할수 없다는거다.
#text{
}
.a.b.c.d.e.f.g.h.i.j.k.l.m.n.o{
}
이렇게 되면
클래스가 아무리 많아도.
id가 우선권이 더 높다.
다른예를들면
#gnb.tab-nav
금메달 + 은메달
header.main-header
동메달+은메달
#gnb.tab-nav ul
금메달 + 은메달 + 동메달
#gnb.tab-nav ul:last-child
금 + 은 + 동 + 은
근데
이모든걸 무시하는
강력한 애들이 있는데,
사용하는건 비추다.
인라인스타일이다.
html 에 바로 넣어버리는 방법
여러분이 id class 다 소용없고 인라인이 우선적으로 적용됨.
그다음
더더더
강력한건
임폴턴트다
*{
color: hotpink !important;
}
이렇게 쓴다.
이거는
인라인 스타일을 이겨버린다.
임폴턴트는 0순위이다.
