css - 如何确定特定 css 规则被覆盖的原因

Question

我正在尝试解决 css 问题(顺便说一句，使用 bootstrap.css)。 我已经创建了自己的自定义 css 文件，以便我可以添加到/或者在某些情况下替换 Bootstrap 规则。

我一直在使用 firefox 中的“检查”工具 - 在 Web 开发人员选项下。 我可以看到我认为应该应用于我的页面的样式已被划掉。我刚刚在 stackoverflow 上的另一篇文章中读到，这意味着样式已被覆盖。但我不明白为什么这会被覆盖或如何进一步解决此问题。

css 规则本身是一个媒体查询 - 我正在尝试检查浏览器的大小，然后根据它的大小更改图像。我如何更改浏览器大小？我正在使用 Firefox 的响应式设计 View 工具，而不是手动进行。

这是被覆盖的规则:

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

 }

你能告诉我哪里做错了吗？谢谢。

编辑 1:

这是应该应用此 css 的实际 html:

  <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 中定义的背景图像的英雄单元。我不确定这是否是最好的方法，但在大多数情况下，它似乎有效。 谢谢。

Answer 1

如果浏览器的宽度是 360px 并且 max-width: 979px 在你的 CSS 中低于 max-width: 360px 它将优先，因为两者都适用到 360 像素的浏览器宽度。

要么将 max-width: 360px 移动到下面，要么设置一个 @media (max-width: 979px) and (min-width: 361px)。

此外，这是一本关于 CSS 优先级的好书，http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/