미디어가 아닌 쿼리가 때때로 CSS의 미디어 쿼리를 재정의하는 이유는 무엇입니까?

미디어 쿼리와 비미디어 쿼리: CSS 특수성 이해

CSS에서는 미디어 쿼리를 활용하여 기기 화면에 따라 스타일을 적용합니다. 크기 또는 기타 뷰포트 특성. 그러나 미디어 쿼리는 일반 CSS 선언에 비해 우선순위가 낮은 것으로 나타나는 경우가 많습니다.

우선순위가 낮은 이유

이러한 동작은 CSS 캐스케이드 개념에서 비롯됩니다. . 여러 규칙이 동일한 요소를 대상으로 하는 경우 브라우저는 해당 규칙의 구체성에 따라 규칙의 우선순위를 지정합니다. 구체성이 높은 선택기가 구체성이 낮은 선택자를 재정의합니다.

미디어 쿼리는 본질적으로 선택기의 구체성을 향상시키지 않습니다. 따라서 비미디어 쿼리 선택기와 미디어 쿼리 선택기가 동일한 구체성을 갖는 경우 해당 미디어 쿼리가 관련이 없으면 비미디어 쿼리 선택기가 우선 적용됩니다.

예:

다음 CSS 조각을 고려하세요.

.logo img {
    width: 100%;
}

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

이 예에서 비미디어 쿼리 규칙은 로고 이미지의 기본 너비를 100%로 정의합니다. 단, 화면 너비가 지정된 범위 내에 들어오면 미디어 쿼리가 활성화되어 너비를 120%로 설정합니다.

단, 화면 너비가 이 범위를 벗어나면 비미디어 쿼리 규칙이 적용됩니다. 미디어 쿼리의 너비 설정을 재정의합니다.

증가 솔루션 우선순위

미디어 쿼리의 우선순위를 높이려면:

1. 규칙 세트 순서 바꾸기:

   • 캐스케이딩을 활용하려면 미디어 쿼리 규칙을 비미디어 쿼리 규칙 아래로 이동하세요. order.

2. 선택기 특이성 증가:

   • 추가 태그 또는 속성을 추가하여 미디어 쿼리 선택기의 특이성을 강화합니다. 선택자. 예를 들어 .logo a img로 변경하면 구체성이 높아집니다.

3. !important(주의) 사용:

   • 이 방법에는 미디어 쿼리 규칙에 "!important"를 추가하는 방법이 포함됩니다. 하지만 유지보수 문제가 발생할 가능성이 있어 권장하지 않습니다.

위 내용은 미디어가 아닌 쿼리가 때때로 CSS의 미디어 쿼리를 재정의하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!