定位除第一个类 X 的元素之外的所有元素，其中父元素在开头有另一个没有类 X 的元素

Question

我想在下面显示的 HTML 中定位除第一个元素之外的所有具有“icon-flight-close”类的元素。我已经确定我不能这样做，因为 header 元素没有这个类，但它有相同的父元素并且在开头定义。

在第一种情况下，我将标题放在#flights div 的开头，在第二种情况下，我将其放在末尾，然后按照我想要的方式应用样式。

HTML：

<div id="flights"  class="form-group col-sm-12">
    <div id="flights-heading-wrapper">
        <label class="heading-big">Flights</label>
     </div>
    <div class="flight row">
        <div class="hand-cursor icon-flight-close col-sm-12 text-left"><div><p>aaaa</p></div></div>
    </div>
    <div class="flight row">
        <div class="hand-cursor icon-flight-close col-sm-12 text-left"><div><p>bbbbb</p></div></div>
    </div>
    <div class="flight row">
        <div class="hand-cursor icon-flight-close col-sm-12 text-left"><div><p>bbbbb</p></div></div>
    </div>
</div>

<div id="flights"  class="form-group col-sm-12">
    <div class="flight row">
        <div class="hand-cursor icon-flight-close col-sm-12 text-left"><div><p>aaaa</p></div></div>
    </div>
    <div class="flight row">
        <div class="hand-cursor icon-flight-close col-sm-12 text-left"><div><p>bbbbb</p></div></div>
    </div>
    <div class="flight row">
        <div class="hand-cursor icon-flight-close col-sm-12 text-left"><div><p>bbbbb</p></div></div>
    </div>
    <div id="flights-heading-wrapper">
        <label class="heading-big">Flights</label>
    </div>
</div>

CSS：

.flight:not(:first-child) .icon-flight-close{
    color: red;
}

这是它的样子： http://jsfiddle.net/gxz9uke2/2/

Answer 1

你可以使用

.flight ~ .flight .icon-flight-close {
    color: red;
}