html - CSS first-child 和 nth-child 无法正常工作

Question

我意识到之前有人问过这个问题，但我通读的所有解决方案都没有给我解决方案。

基本上我在一个 div 中有 4 个响应框，当我向下移动屏幕尺寸时，css first-child 和 nth-child 选择器不会工作，即使我已经为这组下方的另一组框使用了完全相同的代码，并且这完美地工作？？

正如您将看到的，底部的 2 个框正常运行，但顶部的两个框粘在一起，即使已设置边距的 css 来防止这种情况发生。这可能是一个简单的解决方案，但在昨晚把我的头撞得一干二净之后，我想放弃了。

非常感谢任何帮助，谢谢!

这里有一个 fiddle 准确地显示了正在发生的事情:http://jsfiddle.net/f284xyjh/

这是 HTML 代码:

<section id="content"> 

    <div class="container">

        <div id="about">
            <h1><a name="about">WE'RE GOOD... JUST ASK OUR CLIENTS!</a></h1>
            <div id="about-text">
            <p>Above The Fold is a Dublin based creative, digital marketing agency that provides a personal, professional and passionate service tailored specifically to each of our clients no matter the size. We specialise in creative digital solutions centred around the user and aim to provide a rich user experience for people interacting with your brand online. Blending creativity with technical know-how and research we can brand, plan, design and build your websites and online campaigns<p>

            </div><!-- end of about-text -->
        </div><!-- End of about -->

        <div id="services">
        <a name="services"></a>
            <div class="service">
                <div class="service-info">
                    <img src="images/creative-design.png" alt="Creative Design icon" />
                    <h3>Creative Design</h3>
                    <p>Creativity is at the heart of what we do. Combining creative thinking with technology to deliver beautiful websites that stand out and engage your target audience.</p>
                </div>
                <a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
            </div>
            <div class="service">
                <div class="service-info">
                    <img src="images/branding-icon.png" alt="Branding icon" />
                    <h3>Branding</h3>
                    <p>Much more then simply the design of a website. Through strategic planning and research we create dynamic brand icons (logos) that define who you are.</p>
                </div>
                <a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
            </div>
            <div class="service">
                <div class="service-info">
                    <img src="images/strategy.png" alt="Social Media Marketing icon" />
                    <h3>Social Media Strategy</h3>
                    <p>Social media marketing gives you an opportunity to expose your brand to a wider audience. All our campaigns are strategically  planned to maximise your reach. </p>
                </div>
                <a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
            </div>
            <div class="service">
                <div class="service-info">
                    <a href="#"><img src="images/digital-marketing.png" alt="Digital Marketing icon" />
                    <h3>Digital Marketing</h3></a>
                    <p>Your business is unique so you need an online strategy that is designed for you. We deliver research driven results that create awarenss of your brand or services</p>
                </div>
                <a href="#"><div class="find-out-more">FIND OUT MORE</div></a>
            </div>

        </div><!-- end of services -->



    </div><!-- End of content container -->

</section><!-- end of top-content section -->

这是 CSS 代码:

.container {
width: 1160px;
margin: 0 auto;
overflow: hidden;
}

#content {
height: 605px;
background: #F3F3F2;
margin-top: 1px;
padding-top: 25px;
}

#about {
width: 100%;
display: inline-block;
text-align: center;
}

#about p {
font-family: "Proxima Light",Arial,helvetica,garuda,sans-serif;
font-size: 24px;
line-height: 28px;
margin-bottom: 10px;
}

#about-img {
background: url(../img/about-img.png) no-repeat;
width: 370px;
height: 154px;
float: left;
margin-right: 20px
}

#about-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
line-height: 23px;
}

#services {
width: 100%;
display: inline-block;
}

#services h3 {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #FFF;
}

#services p {
font-size: 16px;
line-height: 20px;
color: #FFF;
}

#services a {
text-decoration: none;
}

.service {
background: #3498db; url(../images/service-find-out-triangle.png) no-repeat center   256px;
width: 275px;
height: 295px;
float: left;
margin: 20px 20px 20px 0;
text-align: center;
position: relative;

}

.service:last-child {
margin-right: 0;
}

.service-info {
background: #3498db;
width: 255px;
height: 245px;
padding: 20px 10px 0;
}

.service img {
margin-bottom: 10px;
}

@media only screen and (max-width : 1224px) {

.container {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}

#content { height: auto;}

.service { width: 490px; margin: 20px 20px 20px 0;}
.service:first-child { margin-right: 0!important;}
.service:nth-child(2) { margin-right: 0!important;}
.service-info { width: 465px; }

}

@media only screen and (max-width : 1024px) {

.container { width: 800px;}

.service { width: 390px;}
.service-info { width: 370px; }

}

@media only screen and (max-width : 824px) {

.container { width: 680px;}

.service { width: 330px;}
.service-info { width: 310px;}

}

@media only screen and (max-width : 768px) {

.container { width: 95%;}

.service { width: 100%; margin: 20px 0;}
.service-info { width: 94%; }

}


}

Answer 1

此选择器:.service:nth-child(2) { margin-right: 0!important;} 不起作用，因为您尝试选择的元素不是第二个子元素。

还有...顺便说一下，这个也不是:.service:first-child { margin-right: 0!important;}。

first-child是 anchor 标签

<a name="services"></a>

因此，你应该使用

.service:nth-child(3) { margin-right: 0!important;}

相反...在此特定实例中。

JSfiddle Demo