以 class X 定位除第一个元素之外的所有元素，其中 parent 元素具有另一个开头没有 class X 的元素

Question

我想在下面显示的 HTML 中使用 class "icon-flight-close" 定位除第一个元素之外的所有元素。我已经确定我无法这样做，因为 header 元素没有这个 class，但它有相同的 parent 并且在开头定义。

在第一种情况下，我将 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;
}

以 class X 定位除第一个元素之外的所有元素，其中 parent 元素具有另一个开头没有 class X 的元素

Target all but first element with class X, where parent element has another element without class X at the beginning

html

css

css-selectors

twitter-bootstrap