1

我正在尝试使用 class 设置第一个 div 的背景颜色offer。我以为.offer:first-child会做的伎俩，但这是行不通的。

我也尝试过使用:nth-child(1)，但这也不起作用。

非常感谢任何建议。

我的小提琴：http: //jsfiddle.net/MNQar/

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>
4

3 回答 3

3

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

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

于 2013-07-14T22:55:12.483 回答
3

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

于 2013-07-14T23:01:28.467 回答
2

问题是在第一个报价之前有一个 div，使其成为第二个元素，而不是第一个元素。最好的解决方案是给第一个报价一个不同的类，offer-first并使用它。如果这是不可能的并且第一个报价总是第二个孩子，您可以使用:nth-child(2)

使用:nth-child(2)

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

于 2013-07-14T22:54:41.727 回答