CSS의 실행 순서

Question

CSS 파일의 명령문 실행 순서를 알고 싶습니다. 나는 CSS 파일에 다음 CSS 있습니다

/* screen width larger than 800px */ 
@media screen (min-width: 800px) { 
    .indexphototd { 
      width:200px !important; 
     } 
    .indexphoto { 
     width:200px !important; 
     } 
} 

/* screen width larger than 1200px */ 
@media screen (min-width: 1200px) { 
    .indexphototd { 
      width:300px !important; 
     } 
    .indexphoto { 
     width:300px !important; 
     } 
} 


/* default setting */ 
.indexphototd { 
    width:500px !important; 
    } 
.indexphoto { 
    width:500px !important; 
    } 

나는 2 개 개의 다른 화면 크기에 2 개 클래스의 설정의 2 개 종류를 선언 한 위의 코드에서, 그리고 그 후 나는에 제한없이이 개 문장을 언급 한 화면 크기 (즉, 기본값).

나의 목표는 화면 크기가 위의 두 그룹에 속하지 않는다는 것입니다. 아래의 세 번째 그룹에서 기본값을 설정해야합니다.

하지만 맨 끝에서 기본 설정을 삽입했기 때문에 기본 설정이 화면 크기 별 설정보다 우선 적용되는지 궁금합니다. 나는 그것을 처음에 넣어야합니까? CSS에서 실행 순서를 알려주시겠습니까? 나는 CSS가 프로그래밍 언어가 아니라는 것을 알고있다. 나는 웹 개발에 익숙하지 않고이 모든 것을 배우고 있습니다. 도와주세요. 감사.

Isaac

Answer 1

후기 문은 이전 문을 덮어 씁니다. 따라서 일반적인 문구로 이동해야합니다.

/* General CSS here */ 

/* CSS for min-width 800 here, overides general */ 

/* CSS for min-width 1024 here, overides both general and 800 */ 

Answer 2

미디어 쿼리를하기 전에 기본값을 선언해야합니다.

CSS는 순서대로 "실행"됩니다. 미디어 쿼리를 특정 인스턴스의 기본값보다 우선 적용하여 나중에 선언해야합니다.

Answer 3

CSS는 위에서 아래로 해석되기 때문에, 두 개의 선택기 동일 specificity로하고 동일한 엘리먼트와 일치하는 경우, 스타일 시트 후자 이길.