Question

我正在尝试使用类offer设置第一个div的背景颜色。我认为.offer:first-child可以解决问题，但这不起作用。

我也尝试使用:nth-child(1)，但这也无效。

非常感谢任何建议。

CSS

.offer:first-child { background-color: indianred; }

.special-offers .title, 
.special-offers .offer, 
.special-offers .more {
    height: 200px;
}
[class*="column"] {
    display: inline;
    float: left;
    margin: 0;
}
.column2 { width: 190px;}
.column3 { width: 285px;}

HTML

<div class="row row-spacer special-offers">
    <div class="column2 title">
        <h2>Offers</h2>
    </div>
    <div class="column3 offer padding">
        <div class="date">10. June</div>
        <h3>Høyer tømmer lageret!</h3>
    </div>
    <div class="column3 offer padding">
        <div class="date">10. June</div>
        <h3>Super salg hos Vivikes</h3>

    </div>
    <div class="column1 more">
        <div class="caret"></div>
        <a href="#">More offers</a>
    </div>
</div>

Answer 1

.offer:first-child表示“一个元素，类'offer'是其父元素下面的第一个子元素”，而不是“第一个带有类'offer'的子元素。”

我相信你必须重新考虑如何做到这一点。例如，将一个单独的类粘贴到第一个孩子或其他东西，然后使用像.offer.highlight这样的选择器。

Answer 2

仅限CSS

这应该有效：

.offer { background-color: #ccc; }
.offer ~ .offer {background-color: transparent; }

首先将所有.offer元素设置为具有背景颜色，然后使用兄弟选择器（~）为所有后续.offer元素撤消它。有点破解，但如果你不愿意使用javascript应该没问题。请参阅此处以获得更完整的解释：CSS selector for first element with class

这是一个小提琴：http://jsfiddle.net/MNQar/4/

JS

或者，使用Javascript很容易做到：$(".offer").eq(0).css("background-color","#ccc");

小提琴：http://jsfiddle.net/MNQar/6/

Answer 3

问题是在第一个报价之前有一个div，使其成为第二个元素，而不是第一个元素。最好的解决方案是为第一个商品提供不同的类offer-first并使用它。如果那是不可能的，并且第一个优惠始终是第二个孩子，则可以使用:nth-child(2)

使用:nth-child(2)

http://jsfiddle.net/MNQar/3/

为什么我不能选择“优惠”类的第一个div？

3 个答案:

仅限CSS

JS