CSS不选择其他容器之间的头等舱

Question

css没有选择头等舱

:not(:first)不起作用，因为.callout被其他容器包裹了

.callout:not(:first) {
  color: red;
}

<div class="d-flex">
    <div class="flex-fill">
        <div class="callout">
            Text A
        </div>
    </div>
    <div class="flex-fill">
        <div class="callout">
            Text B - only this set color red
        </div>
    </div>
</div>

Answer 1

选择其父元素不是其父元素的.callout的{​​{1}}元素

:first-child

或者只是还原逻辑并定位.flex-fill:not(:first-child) .callout { color: red }

:last-child

或在第二个父元素内定位.flex-fill:last-child .callout { color: red } ，无论您有多少.callout个兄弟姐妹

.flex-fill

  

Codepen example

---

无论如何，我不建议使用这种选择器或依赖于特定的标记结构，因为随着代码的增长，这种方法很容易引起可维护性问题，如果可能的话，我建议放置一个特定的标记。为此，在正确的元素上添加类。