[英]CSS nth-child() used in a media query isn't working
我一直在尝试使用@media 查询将移动屏幕中的第二个 CTA 按钮的背景设置为红色和上边距,如下所示。
@media screen and (max-width: 640px) {
.send-submit-look-row:nth-child(2) .send-submit-look-col .send-submit-look-cta {
background: red;
margin-top: 1rem;
}
}
HTML:
<div class="send-submit-look">
<div class="wrap-x">
<div class="inside">
<div class="row send-submit-look-row">
<div class="col col-xs-12 col-md-4 send-submit-look-col">
<picture>
<source media="(max-width: 360px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-360x226.png">
<source media="(max-width: 668px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-640x402.png">
<source media="(max-width: 1024px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-1024x643.png">
<source srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-1500x942.png">
<img src="http://pwp-wordpress/wp-content/uploads/2022/08/Single_Gift_Image-1500x942.png" alt="">
</picture>
<div class="icon-title">SENDING A FEW GIFTS ONLINE?</div>
<div class="icon-description" style="height: 95px;">Shop & checkout online.
Easily ship to multiple addresses online.
Seamlessly add logos.
</div>
<div class="center-xs send-submit-look-cta">
<a href="http://shop.packedwithpurpose.gifts/?__hstc=198200880.4de93445cbe9490550807da2605860ed.1633498012520.1661798674243.1661831074692.341&__hssc=198200880.20.1661831074692&__hsfp=3731934112" class="btn cta-btn-purple" role="button" target="" title="Shop Now">
Shop Now </a>
</div>
</div>
<div class="col col-xs-12 col-md-4 send-submit-look-col">
<picture>
<source media="(max-width: 360px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-360x226.png">
<source media="(max-width: 668px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-640x402.png">
<source media="(max-width: 1024px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-1024x643.png">
<source srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-1500x942.png">
<img src="http://pwp-wordpress/wp-content/uploads/2022/08/Large_Order_Image-1500x942.png" alt="">
</picture>
<div class="icon-title">SUBMITTING A LARGE ORDER?</div>
<div class="icon-description" style="height: 95px;">Personalize your business gifts.
Add your logo to the box and message card.
Bulk-ship to one address or drop-ship to 10,000+</div>
<div class="center-xs send-submit-look-cta">
<a href="http://packedwithpurpose.gifts/submit-my-order?__hstc=198200880.4de93445cbe9490550807da2605860ed.1633498012520.1661798674243.1661831074692.341&__hssc=198200880.20.1661831074692&__hsfp=3731934112" class="btn cta-btn-purple" role="button" target="" title="Order Here">
Order Here </a>
</div>
</div>
<div class="col col-xs-12 col-md-4 send-submit-look-col">
<picture>
<source media="(max-width: 360px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-360x226.png">
<source media="(max-width: 668px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-640x402.png">
<source media="(max-width: 1024px)" srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-1024x644.png">
<source srcset="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-1500x943.png">
<img src="http://pwp-wordpress/wp-content/uploads/2022/08/Custom_Order_Image-1500x943.png" alt="">
</picture>
<div class="icon-title">LOOKING TO MAKE IT MEMORABLE?</div>
<div class="icon-description" style="height: 95px;">Customize 50+ business gifts.
Utilize our Address Collection Service.
Include Branded Products.</div>
<div class="center-xs send-submit-look-cta">
<a href="http://packedwithpurpose.gifts/gift-concierge?__hstc=198200880.4de93445cbe9490550807da2605860ed.1633498012520.1661798674243.1661831074692.341&__hssc=198200880.20.1661831074692&__hsfp=3731934112" class="btn cta-btn-purple" role="button" target="" title="Connect with an Expert">
Connect with an Expert </a>
</div>
</div>
</div>
</div>
</div>
</div>
它没有这样做,而是增加了所有三个按钮和它们上方的文本之间的空间。 这是页面
下图显示了我想在哪里应用这个 CSS。
您的 CSS 选择器不正确。 这是解决方案。
@media screen and (max-width: 640px) {
.send-submit-look-col:nth-child(2) .send-submit-look-cta {
background: red;
margin-top: 1rem;
}
}
可能是一个简单的问题,因为您的 css class 没有使用 .important 标签。 我假设您使用的是 css 系统,例如引导程序,它可能会优先考虑自己的类。
@media only screen and (max-width:640px) {
.send-submit-look-row:nth-child(2) .send-submit-look-col .send-submit-look-cta {
background: red;
margin-top: 1rem;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.