css - 如何確定爲什麼特定的css規則被覆蓋

我想解決一個css問題（使用bootstrap.css btw）。我創建了自己的自定義css文件，以便我可以添加到/或在某些情況下替換引導程序規則。css - 如何確定爲什麼特定的css規則被覆蓋

我一直在使用Firefox中的「Inspect」工具 - 在Web Developer選項下。我可以看到，我認爲應該應用到我的網頁的樣式已被刪除。我剛剛在另一篇文章中讀到了stackoverflow，這意味着風格已被覆蓋。但我不明白爲什麼這被覆蓋或如何進一步排除這個問題。

CSS規則本身是一個媒體查詢 - 我試圖檢查瀏覽器的大小，然後根據它有多大，更改圖像。我如何改變我的瀏覽器大小？我使用的是Firefox的響應式設計視圖工具，而不是手動執行。

這裏有被覆蓋規則：

@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; 
} 
}

這是正在應用的一個：在那裏我已經出了錯

@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; 
} 

}

你能告訴我嗎？謝謝。

EDIT 1：

下面是實際的HTML其中這個CSS應該被應用到：

<div class="container"> 
    <div class="span8"> 
      <div class="hero-unit"> 
      <h1>&nbsp;</h1> 
      <h1>&nbsp;</h1> 
      <h1>&nbsp;</h1> 
      <h1>&nbsp;</h1> 
      <h1>&nbsp;</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 &raquo;</a></p> 
       </div><!--/span--> 

       <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 &raquo;</a></p> 
       </div><!--/span--> 


       <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 &raquo;</a></p> 
       </div><!--/span-->   
      </div>  
     </div>

這是英雄單元，其具有在CSS中定義的背景圖片。我不確定這是否是最好的方式來做到這一點，但大多數情況下，它似乎是有效的。謝謝。

來源

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（min-width：361px）和（max-width：979px）{}'。 – daGUY

@dot不客氣。 –

css - 如何確定爲什麼特定的css規則被覆蓋

回答

相關問題