CSS Specificity
CSS 특수성
CSS 특이성은 선택자의 가중치입니다. 다른 캐스케이드 규칙이 같을 때 브라우저는 이 가중치를 사용하여 어떤 스타일이 적용될지 선택합니다.
다른 예시
`:where(.card)`는 특이성이 0인 반면, `.checkout .card.selected`는 더 높습니다. 테마 토큰은 낮은 가중치의 기본 규칙을 깔끔하게 대체할 수 있습니다. 타사 ID 선택자는 더 긴 선택자로 싸우는 대신 레이어에 배치됩니다.
주요 부분
- 01ID 열
- 02클래스/속성/의사클래스 열
- 03타입/의사 요소 열
사용할 때
구성 요소 선택자는 필요한 만큼 가볍게 유지하세요. 스타일이 적용되지 않는 경우 브라우저의 계산된 캐스케이드를 검사하세요.
다음 경우에는 사용하지 마세요
ID, 반복된 클래스 또는 `!important`를 사용하여 CSS 구조를 수정하지 마세요.
코드에서 사용된 이름
selector specificity tuple; :where() contributes zero 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with CSS 특수성 (CSS Specificity)。 User context：`:where(.card)`는 특이성이 0인 반면, `.checkout .card.selected`는 더 높습니다. 테마 토큰은 낮은 가중치의 기본 규칙을 깔끔하게 대체할 수 있습니다. 타사 ID 선택자는 더 긴 선택자로 싸우는 대신 레이어에 배치됩니다. Design concept to apply：CSS 특수성 (CSS Specificity)。 Why it fits：구성 요소 선택자는 필요한 만큼 가볍게 유지하세요. 스타일이 적용되지 않는 경우 브라우저의 계산된 캐스케이드를 검사하세요. Do not use it when：ID, 반복된 클래스 또는 `!important`를 사용하여 CSS 구조를 수정하지 마세요. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：공식 문서라고 해도 초안, 출시 후보, 최종 버전일 수 있어요. 상태와 브라우저나 플랫폼 지원 여부를 꼭 확인하세요. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how CSS 특수성 (CSS Specificity) is used now. Definition: CSS 특이성은 선택자의 가중치입니다. 다른 캐스케이드 규칙이 같을 때 브라우저는 이 가중치를 사용하여 어떤 스타일이 적용될지 선택합니다. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.