css - 특정 CSS 규칙을 덮어 쓰는 이유를 확인하는 방법

bootstrap.css btw를 사용하여 CSS 문제를 해결하려고합니다. 부트 스트랩 규칙을/또는 경우에 따라 추가 할 수 있도록 내 자신의 사용자 지정 CSS 파일을 만들었습니다.css - 특정 CSS 규칙을 덮어 쓰는 이유를 확인하는 방법

저는 웹 개발자 옵션에 따라 firefox에서 "Inspect"도구를 사용해 왔습니다. 내 페이지에 적용해야한다고 생각하는 스타일이 겹쳐져 있음을 알 수 있습니다. 방금 스타일을 덮어 쓴 것을 의미 stackoverflow 다른 게시물을 여기에 읽습니다. 하지만이 문제를 덮어 쓰는 이유 또는이 문제를 해결하는 방법을 이해할 수 없습니다.

CSS 규칙 자체는 미디어 쿼리입니다. 브라우저의 크기를 확인하려고하는데 크기가 얼마나 큰지에 따라 이미지를 변경하십시오. 브라우저 크기를 어떻게 변경합니까? 수동으로하는 대신 Firefox의 반응 형 디자인보기 도구를 사용하고 있습니다.

@media (max-width: 979px){ 
.hero-unit h1 { 
    margin-bottom: 0; 
    font-size: 2.0em; 
    line-height: 1.5; 
    letter-spacing: -1px; 
    color: inherit; 
} 
.hero-unit p { 
    font-size: 1.2em; 
    font-weight: 20; 
    line-height: 1.5em; 
    color: inherit; 
} 
.btn-large { 
    padding: 6px 10px; 
    font-size: 11px; 
    line-height: normal; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
      border-radius: 5px; 
} 
.hero-unit { 
    padding: 1em; 
    margin-bottom: 2em; 
    background-color: #eeeeee; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
      border-radius: 6px; 
} 
h2 { 
    font-size: 1.5em; 
    line-height: 2em; 
} 

}

당신이 말해 줄 수 내가 잘못 갔어요 :

@media (max-width: 360px) { 
.hero-unit h1 { 
    margin-bottom: 0; 
    font-size: 0.2em; 
    line-height: 1em; 
    letter-spacing: -5px; 
    color: inherit; 
} 
.hero-unit p { 
    font-size: 0.2em; 
    font-weight: 50; 
    line-height: 1em; 
    color: inherit; 
} 
.hero-unit { 
    background: url("../img/1.jpg"); 
    padding: 1em; 
    margin-bottom: 2em; 
    background-color: #eeeeee; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
      border-radius: 6px; 
} 
}

이 적용되는 사람은 다음과 같습니다

여기에 덮어 쓰기되고있는 규칙인가? 감사.

EDIT 1 :

<div class="container"> <div class="span8"> <div class="hero-unit"> <h1> </h1> <h1> </h1> <h1> </h1> <h1> </h1> <h1> </h1> </div> <div class="row-fluid"> <div class="span4"> <h2>list 1 </h2> <p>list</p> <p><a class="btn" href="<?php echo base_url();?>index.php/list1/"><i class="icon-list-alt"></i> View details »</a></p> </div> <div class="span4"> <h2>list2</h2> <p>some other list</p> <p><a class="btn" href="<?php echo base_url();?>index.php/list2/"><i class="icon-globe"></i> View details »</a></p> </div> <div class="span4"> <h2>routes</h2> <p>list of all routes</p> <p><a class="btn" href="<?php echo base_url();?>index.php/routes/"><i class="icon-globe"></i> View details »</a></p> </div> </div> </div>

그것은 CSS에 정의 된 배경 이미지가 주인공 단위이다 :

여기서이 CSS를인가하도록되어 실제 HTML이다. 이 방법이 가장 좋은 방법인지 아닌지는 잘 모르겠지만, 대부분은 효과가있는 것 같습니다. 감사합니다.

출처

2012-10-02 dot

브라우저의 너비가 360px이고 max-width: 979px이 CSS의 max-width: 360px보다 낮은 경우 두 브라우저가 모두 360px의 브라우저 너비에 적용되므로 우선 적용됩니다.

max-width: 360px을 아래로 이동하거나 @media (max-width: 979px) and (min-width: 361px)으로 설정하십시오.

또한 CSS의 우선 순위에 대한 좋은 읽기입니다. http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

출처

2012-10-02 12:51:15

감사합니다. 그 말이 맞아! – dot

두 번째 규칙에 '최소 너비'와 '최대 너비'를 모두 지정하면 겹침이 없도록 할 수 있습니다. '@media (최소 너비 : 361px) 및 (최대 너비 : 979px) {}'. – daGUY

@dot 대단합니다. –

css - 특정 CSS 규칙을 덮어 쓰는 이유를 확인하는 방법

답변

관련 문제