https://www.w3schools.com/css/css_specificity.asp
CSS Specificity
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
우선순위 점수는 0점과 1, 10, 100, 1000점으로 유일하다.
1000점과 100점 0점은 독보적이기 때문에, 딱 하나씩만 배정된다.
기억해야 할 것은 10점과 1점임.
- 인라인 선언: 1000점
- id: 100점
- class(클래스): 10점
- element(요소): 1점
- * : 0점
pseudo-classes (가상 클래스 :), attribute selectors : 10점
pseudo-elements (가상 요소 :: ) : 1점
pseudo-classes (가상 클래스)
- "특정" 상태나 "특정" 위치의 요소를 선택
- : 으로 시작
- 가상 "클래스"? => 선택자로 사용되었음. 왜냐, 특정 상태나 위치일 때를 선택해서 css 스타일 적용
:hover
:focus
:nth-child
..
https://www.w3schools.com/css/css_pseudo_classes.asp
Attribute-selector (속성 선택자)
https://www.w3schools.com/css/css_attribute_selectors.asp
pseudo-elements (가상 요소)
- 가상으로 생성된 요소
- :: 으로 시작
- 문서에 보이지 않는 요소
- content: ''
::before: 요소 내부의 가상의 첫 번째 자식으로 생성되는 요소
::after: 요소 내부의 가상의 마지막 자식으로 생성되는 요소
::first-line: 요소의 첫 번째 줄
::first-letter: 요소의 첫 번째 글자
https://www.w3schools.com/css/css_pseudo_elements.asp