1

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

我一直在使用 Firefox 中的“检查”工具 - 在 Web 开发人员选项下。我可以看到我认为应该应用于我的页面的样式已被划掉。我刚刚在 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;
}   

 }

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

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

4

1 回答 1

2

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

移动max-width: 360px下面或设置一个@media (max-width: 979px) and (min-width: 361px).

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

于 2012-10-02T12:51:15.143 回答