Question

我希望使用类＆＃34; icon-flight-close＆＃34;来定位除第一个元素之外的所有元素。在下面的HTML中。我已经确定我无法这样做，因为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;
}

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

1 个答案: