일반 CSS 규칙이 CSS의 미디어 쿼리보다 우선하는 이유는 무엇입니까?

미디어 쿼리 및 CSS 우선순위

CSS에서 미디어 쿼리는 일반 CSS 규칙보다 우선순위가 낮습니다. 이는 스타일이 적용되는 순서를 지정하는 규칙 집합인 CSS Cascade에 의해 결정됩니다.

미디어 쿼리의 우선순위가 낮은 이유

미디어 쿼리는 그렇지 않습니다. 선택자의 특이성을 높입니다. 즉, 일반 CSS 규칙과 미디어 쿼리가 동일한 구체성을 가진 동일한 요소를 대상으로 하는 경우 일반 CSS 규칙이 우선 적용됩니다.

예:

고려하세요. 다음 코드:

.logo img {
  width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
    width: 120%;
  }
}

이 예에서 미디어 쿼리는 비미디어 쿼리 규칙보다 우선순위가 낮습니다. 따라서 뷰포트 크기가 미디어 쿼리와 일치하면 비미디어 쿼리 규칙이 계속 적용되어 이미지 너비가 100%로 설정됩니다.

해결 방법

일반 CSS 규칙보다 미디어 쿼리의 우선순위를 지정하려면 두 가지 옵션이 있습니다:

1. 규칙 순서 바꾸기

미디어 쿼리가 비미디어 쿼리 규칙 뒤에 오도록 CSS 규칙을 재정렬합니다.

.logo img {
  width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
    width: 120%;
  }
}

2. 선택기 특이성 높이기

추가 선택기를 추가하여 미디어 쿼리 규칙의 특이성을 높이세요.

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo a img {
    width: 120%;
  }
}

!important를 피하세요

하세요 미디어 쿼리의 우선순위를 무시하기 위해 "!important" 선언을 사용하지 마세요. 이로 인해 "!important"가 과도하게 사용되어 CSS 특정성을 관리하기 어려워집니다.

위 내용은 일반 CSS 규칙이 CSS의 미디어 쿼리보다 우선하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!