Css 使用媒体查询定位嵌套元素

背景信息：我正在完成一个包含四个结构部分的网站：横幅、页眉、兴趣部分和页脚。通过使用媒体查询，我使横幅、兴趣部分和页脚部分具有响应性。应用媒体查询后唯一不起作用的部分是标题

问题：使用媒体查询定位深度嵌套元素的最佳方法是什么？我所有的查询都可以工作，除了在一个嵌套特别深的部分。正如您在下面看到的，我尝试了更简单的

ul.interests

，但我想知道是否因为嵌套，我需要做更多的工作，例如

header div.row div.col.span-1-of-2.box ul.interests

。（虽然，这也不是针对元素。）哎呀！提前谢谢

已经检查了以下帖子： ;

标题部分的HTML

<header>
    <div class="row">
        <div class="col span-1-of-2 portrait">
            <img src="resources/img/image1.jpg" alt=" portrait" />
            <h2 class="portrait_override">Name</h2>
        </div>

        <div class="col span-1-of-2 box">
            <ul class="interests">
                <li><a href="#section-interests">Interest #1</a></li>
                <li><a href="#section-interests">Interest #2</a></li>
                <li><a href="#section-interests">Interest #3</a></li>
            </ul>
            <h1>Name</h1>
            <p>Short Bio - Be brave. Let's put some happy trees and bushes back in here. You can do anything here. So don't worry about it. Follow the lay of the land. It's most important. Be brave. Let's put some happy trees and bushes back in here. You can do anything here. </p>
            <ul class="icon-nav">
                <li><a href="https://about.me/"><i class="ion-person"></i></a></li>
                <li><a href="https://www.facebook.com/"><i class="ion-social-facebook"></i></a></li>
               <li><a href="https://twitter.com/"><i class="ion-social-twitter"></i></a></li>
               <li><a href="https://www.instagram.com/"><i class="ion-social-instagram"></i></a></li>
               <li><a href="https://www.tumblr.com/"><i class="ion-social-tumblr"></i></a></li>
            </ul>
        </div>
    </div>
</header>

媒体查询

/* Big tablets to 1200px (widths smaller than the 1140px row) */
@media only screen and (max-device-width: 1140px) {

/* BANNER */
    /* no changes */

/* HEADER */

ul.interests {
    background-color: yellow;    
    }  

/* INTERESTS SECTION */    


/* FOOTER */    

}  /* closes the media tag */

图像

---

看起来不错（）-请注意，我已将

max device width

更改为

max width

，以便在桌面浏览器中工作。您确定要在其他CSS之后加载媒体查询代码吗？谢谢！！天哪！我刚做了同样的改变，它就出现了。昨天浪费了几个小时。唉。我需要阅读最大设备宽度与最大宽度的对比。很明显，我没有像我想的那样理解它！使用

max width

，除非目标是具有已知尺寸的特定设备。这非常有用！我怎样才能对这个答案投赞成票？

/* Big tablets to 1200px (widths smaller than the 1140px row) */
@media only screen and (max-device-width: 1140px) {

/* BANNER */
    /* no changes */

/* HEADER */

ul.interests {
    background-color: yellow;    
    }  

/* INTERESTS SECTION */    


/* FOOTER */    

}  /* closes the media tag */