html - 以类 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;
}