CSS 우선순위 계산과 이기는 규칙 찾기
선택자를 붙여 넣어 우선순위를 계산하거나, CSS와 요소를 붙여 넣어 적용되는 규칙을 확인하세요.
- 기기에서 실행돼요
- 회원가입 불필요
- 한 번 방문하면 오프라인에서도 작동해요
모드
브라우저 기본 스타일과 다른 스타일시트는 포함되지 않아요. 어디로도 전송되지 않아요.
| 선택자 | 우선순위 | 가중치 | 맥락 |
|---|
| 규칙 | 값 | 우선순위 | 레이어 | 결과 |
|---|
어떤 CSS 규칙이 이기는지 알아보기 방법
- 모드를 고르세요: 선택자 계산 또는 이기는 규칙 찾기.
- 선택자를 붙여 넣거나, CSS, HTML, 속성을 붙여 넣으세요.
- 점수를 확인하거나, 이기는 규칙과 나머지 규칙이 진 이유를 보세요.
질문
우선순위는 어떻게 계산하나요?
id는 1,0,0, 클래스, 속성, 가상 클래스는 0,1,0, 요소 이름과 가상 요소는 0,0,1로 계산해요. 전체 선택자(*)와 :where()는 0점이에요.
:is(), :not(), :has()는 어떻게 계산하나요?
가장 강한 인자만큼 계산해요. 그래서 :is(#a, .b) p는 1,0,1이에요. #a가 :is() 안에서 가장 강한 부분이기 때문이죠. :where(#a) p인 규칙은 0,0,1이에요.
레이어에 든 규칙이 일반 규칙에 지는 이유는 무엇인가요?
일반 선언에서는 어떤 레이어에도 속하지 않은 규칙이 레이어 안의 규칙을 이겨요. !important는 순서가 뒤바뀌어서, 앞쪽 레이어가 이겨요. 일반 style 속성은 일반 스타일시트의 모든 규칙을 이기고, !important가 붙은 style 속성은 다른 !important 규칙을 모두 이겨요.
제 CSS가 어디로 전송되나요?
아니요. 브라우저가 이 탭에서 선택자를 해석하고 맞춰 보며, 어떤 데이터도 서버로 전송되지 않아요.
리뷰
아직 리뷰가 없어요. 첫 리뷰를 남겨 보세요.