css - 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不是:first-child其父元素的元素

.flex-fill:not(:first-child) .callout {
   color: red
}

或者只是恢复逻辑并针对:last-child

.flex-fill:last-child .callout {
   color: red
}

或者.callout以第二个父元素内部为目标，无论.flex-fill您有多少兄弟姐妹

.flex-fill:nth-child(2) .callout {
   color: red
}

代码笔示例

---

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