미디어 쿼리 스타일이 원래 스타일을 덮어 쓰지 않음

Question

내가 만들고있는 웹 사이트에 대해 일부 미디어 쿼리를 사용하려고합니다. 그러나 제가 가지고있는 문제는 미디어 쿼리 스타일이 실제로 적용되는 동안 오버라이드되는 것입니다. 나는 똑같은 선택자를 사용하고 있기 때문에 왜 그런지 말해 줄 수 없다. 아무도 내가 보지 못하는 것을 지적 할 수 있습니까? 나는 아무도의 표시를하기 위해 탐색을 설정 한 경우

ORIGINAL CSS

#global-wrapper-outer > #global-wrapper-inner { 
    width: 85%; 
    height: 100%; 
    margin: 0 auto; 
    position: relative; 
} 
    #global-wrapper-outer > #global-wrapper-inner > nav { 
     background: #fff; 
     padding-bottom: 20px; 
     box-shadow: 0 4px 2px -2px gray; 
    } 

미디어 쿼리의 CSS

@media screen and (max-width:1024px) { 
    #global-wrapper-outer > #global-wrapper-inner { 
     width: 100%; 
    } 
    #global-wrapper-outer > #global-wrapper-inner > nav { 
     display: none; 
    } 
} 

두 번째 미디어 쿼리는 잘 작동한다. 그러나 # global-wrapper-inner의 너비를 100 %로 설정하려고하면 적용되지 않습니다. F12 키를 눌러 해당 요소를 선택하면 스타일이 적용된 것을 볼 수 있습니다. 그러나 스타일 자체는 넘어져서 이 아니고 실제로는이 적용되지 않고 여전히 85 %의 원래 너비가 있습니다.

Answer 1

원본 CSS의 선택자는 미디어 쿼리에서 선택자와 동일하게 나타납니다. 첫 번째 선언은 동일한 속성 (예 : width)을 타겟팅하고 있으며 미디어 쿼리 규칙 집합이 우선 적용되기 때문에 그것은 전에 원래 규칙 집합 앞에 나타납니다.

두 번째 미디어 쿼리 선택기는 원본 CSS에서 설정되지 않은 속성을 대상으로하므로 특수성이 적절하지 않습니다. 나는 내 라인이 곳 코멘트 발견까지 재정의 CSS 문제를 찾기 위해 노력하고 최소 2 시간이었다

@media screen and (max-width:1024px) { 
    body #global-wrapper-outer > #global-wrapper-inner { 
     width: 100%; 
    } 
    #global-wrapper-outer > #global-wrapper-inner > nav { 
     display: none; 
    } 
} 

Answer 2

:

첫 번째 미디어 쿼리의 선택이 우선하도록하려면 그것에 조상 요소를 앞에 추가 잘못 ... 그리고 CSS의 두 번째 정의가 작동하지 않는 :

을 그래서 정도로 바보하지 않습니다!

/* LITTLE SCREENS */ 

@media screen and (max-width: 990px) { 
    ... whatever ... 
} 

/* BIG SCREENS */ 

@media screen and (min-width: 990px) { 
    ... whatever more ... 
} 

는 절대 사용하지 마십시오 : 두 줄을 내가 그랬던 것처럼 :

// This is not a comment in CSS! 

/* This is a comment in CSS! */ 

Answer 3

일반 CSS 파일 (style.css)보다 나중에 미디어 쿼리 파일 (queries.css)을 연결해야합니다. 그런 식으로 queries.css의 규칙이 style.css의 규칙보다 우선합니다.