我想在下面显示的 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/
最佳答案
你可以直接使用
.flight ~ .flight .icon-flight-close {
color: red;
}
关于html - 以类 X 定位除第一个元素以外的所有元素,其中父元素在开头有另一个没有类 X 的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28988662/