Question

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

问题：使用媒体查询定位深层嵌套元素的最佳方法是什么？我的所有查询都有效，但一个部分除外，它具有特别深的嵌套。正如您将在下面看到的那样，我尝试了更简单的ul.interests，但我想知道是否因为嵌套我需要做更多的工作，例如header div.row div.col.span-1-of-2.box ul.interests。（虽然，这也不是针对元素。）哎！提前谢谢！

已经查看以下帖子： CSS Media queries and div elements; Targeting nested elements with CSS

标头部分的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>

UL的常规CSS

/*  List of Interests */

ul.interests {
    background-color: #eee;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    width: 90%;
    margin: 0 5%;
    margin-top: 2%;
}

.interests li { 
    font-size: 80%;
    margin: 0 4%;
    transition: color 0.2s;
}

.interests li:first-child { margin-left: 8%; }
.interests li:last-child { margin-right: 4%; }

.interests li:hover,
.interests li:active { background-color: #555; }

.interests li a:link,
.interests li a:visited{
    text-decoration: none;
    color: #555;
    transition: color 0.2s;    
}

.interests li a:hover,
.interests li a:active { color: #ccc; }

媒体查询

/* 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 */

图片 Site - Post Media Query @ 1129px

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

0 个答案: