[CSS] 속성 선택자와 선택자의 우선순위 정리

 

1. 

표현법	결과값에 대한 조건	비교할 범위 대상
선택자[속성=속성값] {   }	일치
선택자[속성~=속성값] {  }	포함	단어 기준
선택자[속성|=속성값] {  }	시작	-로 구분된 단어기준
선택자[속성^=속성값] {  }	시작	일반문자열기준
선택자[속성$=속성값] {  }	끝	일반문자열기준
선택자[속성*=속성값] {   }	포함	일반문자열기준

 

2.

자손	후손
바로 하위인 요소들 (시작태그와 종료태그 사이에 있는 것)	하위 요소들 전부 (자식 포함)
">" 로 구분	띄어쓰기로 구분
a>b {             스타일속성명 : 값;             스타일속성명 : 값;             ...         }	a b {             스타일속성명 : 값;             스타일속성명 : 값;             ...         }

** div 태그 안에 div 태그 안에 ul 태그 안에 li 태그 안에 span 태그를 찾는다고 한다면, 

li>span 과 같이 바로 앞 부분의 태그만 작동한다. 다만 이렇게 되면 li가 여러개일 경우 태그를 특정할 수가 없기 때문에 li태그에 클래스 혹은 id 를 특정해서 #li의 아이디>span 과 같이 특정시켜주어야 한다.

 

 

3. 

 

동위 관계 : (같은 레벨) 에 있는 뒤에 위치한 특정 요소를 선택할 때 사용
a 요소 뒤에 있는 b 요소 "하나만" 을 선택하고자 할 때	a 요소 뒤에 있는 b 요소 "모두" 를 선택하고자 할 때
a+b {             스타일속성명 : 값;             ...         }	a~b {             스타일속성명 : 값;             ...         }

 

 

 

 

4. 반응 선택자

 

 

반응 선택자 : 사용자의 움직임에 따라 선택이 되거나 안되는 선택자
해당 요소에 클릭이 되었을 경우 스타일을 부여하겠다.	해당 요소에 마우스가 올라가는 순간 스타일을 부여하겠다.
선택자:active {             스타일속성명 : 값;             ...         }	선택자:hover {             스타일속성명 : 값;             ...         }

 

 

5.

상태 선택자 : 요소의 상태에 따라서 선택되는 선택자
checked (체크된) 상태의 요소만 선택	초점 (focus) 이 맞춰진 input 요소 선택
선택자:checked {             스타일속성명 : 값;             ...         }	선택자:focus {             스타일속성명 : 값;             ...         }

 

 

* 선택자 우선순위

 

기본적으로 css 는 위에서부터 아래로 적용됨

이 때, 동일한 요소를 다양한 선택자로 css 가 부여된 경우 우선순위에 따라 적용됨

 

태그선택자 -> 클래스선택자 -> 아이디선택자 -> 인라인스타일방식 -> !important

 

단, 겹치지 않는 스타일일 경우에는 둘 다 반영된다