점수표
class는 10점
속성선택자 10점
id는 100점
inline은 1000점
imporatnt는?
행동
id 1개에 100점, 클래스 101개 1010점 비교
inline기입 1000점 클래스 101개 1010점 비교
important와 inline 비교
important와 id, inline 비교
속성 선택자 10점 클래스 10점 비교
See the Pen css specificity by leeyoonseo (@okayoon) on CodePen.
결과
id 1개(100점) > 클래스 101개(1010점)
inline style(1000점) > 클래스 101개(1010점)
important (??) > inline style (1000점)
important (??) > id, inline style
속성선택자 a[href=""] (10점) > 클래스 (10점)
최총
important > inline > id > 속성선택자 > class
'~2022 > FE-HTML, CSS, ...etc' 카테고리의 다른 글
| <input> autocomplete Attribute , 자동 완성 기능에 대하여 (0) | 2019.11.25 |
|---|---|
| input 타입 range 스타일 수정하기_커스텀 스타일 (3) | 2019.08.01 |
| 메타태그로 브라우저 사용자 페이지 우회시키기(리다이렉션 시키기) (0) | 2019.07.29 |
| 유튜브 비디오 태그(iframe) css만으로 반응형 비디오 만들기 (0) | 2019.06.26 |
| CSS 네이밍 케이스, 방법론 (케밥 kebab-case/파스칼 pascalCase/스네이크snake_case/헝가리) (0) | 2019.06.15 |
| 사파리 브라우저에서 border-radius에 overflow:hidden 적용 안되는 이슈, 버그(?) (0) | 2019.06.15 |
| 아이프레임(iframe)이란? (0) | 2019.06.05 |
| 조건부 주석(Conditional comments) (0) | 2019.06.05 |