如何使用css定位父容器中第一次出现的元素？

Question

我正在尝试将第一次出现的.discount类作为目标但是有些它不起作用。我正在尝试.discount：first-child但它的目标是.container类中的所有.discount类。

任何人都知道如何只定位.container元素中的第一个.discount类元素？

我的HTML代码如下所示

<div class="container">
    <div class="wrapper">
        <div class="some-class">
            Product
        </div>
        <div class="some-class">
            Discount
        </div>
    </div>
    <div class="wrapper">
        <div class="product">
            Product 1
        </div>
        <div class="discount">
            $1
        </div>
    </div>
    <div class="wrapper">
        <div class="product">
            Product 2
        </div>
        <div class="discount">
            $5
        </div>
    </div>
    <div class="wrapper">
        <div class="product">
            Product 4
        </div>
        <div class="discount">
            $10
        </div>
    </div>
</div>

Answer 1

为什么你不在你想要的div中放入另一个类。像这样http://jsfiddle.net/8L0un657/

<div class="wrapper">
    <div class="product">
        Product 1
    </div>
    <div class="discount selected">
        $1
    </div>
</div>

Answer 2

试试这个

.wrapper:nth-child(2) > .discount:nth-child(2)

这将选择包装类，它是其父级（即容器）的第二个子级，然后选择折扣类，它是其父级的第二个子级，即包装器div。

JsFiddle

但你也可以使用＆＃39; id＆＃39;引用任何特定元素。