Question

我正试图在屏幕大小调整时更改标签的颜色。我的html页面有以下几行

<meta name="viweport" content="width=device-width, inital-scale=1.0">
.
.
    <div class="container">
        <div id="bg">
            <img src="/affeo/img/lll1.jpg" class="img-responsive"/>
            </div>
    </div>
    <div class="container">
        <div class="jumbotron text-left" id="jumboText">
                <h1>Hello World 0</h1>
            </div>
    </div>

CSS文件具有以下样式：

@media all and (max-width: 1000px) {
    #bg {
          display:none;
    }

    #jumboText h1 {
      color: black;
    }
}
.
.
#jumboText {
  position: absolute;
  top: 20%; 
  left: 15%; 
  background-color:transparent;
}

#jumboText h1 {
  position: absolute;
  padding-left: 10px;
  color: #FFFFFF;
  opacity: 0;
  white-space: nowrap;
}

现在，当我调整屏幕大小时，id：bg中的图像会按预期消失，但jumboText的颜色不会变为黑色。

Answer 1

将媒体查询移至代码的底部。

现在的方式 - 媒体查询中的代码将被常规代码覆盖

或者，您可以通过在选择器中添加body标签来提高媒体查询中类的特异性

@media all and (max-width: 1000px) {
    body #bg {
          display:none;
    }

    body #jumboText h1 {
      color: black;
    }
}

Answer 2

您需要在非媒体查询样式之后声明媒体查询样式 - 向下。否则，媒体查询将被覆盖。

在h1上还声明了opacity:0;，需要在媒体查询中进行更改。

http://jsfiddle.net/omupxnhm/6/

@media查询无效（不更改<h1>的颜色）</h1>

2 个答案: