css - css不选择其他容器之间的第一类
问题描述
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>
解决方案
选择其父元素.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
}
无论如何,我不建议使用这种选择器或依赖特定的标记结构,因为随着代码的增长,这种方法很容易导致可维护性问题,如果可能的话,我建议为此放置一个特定的类目的在正确的元素上。
推荐阅读
- autodesk-forge - AutoDesk Forge:当我想获取/放置服务限制时,我应该填写什么:所有者
- swift - 如何在swift中为多个按钮创建一个iboutlet
- java - 测试容器:服务就绪后同步日志
- git - 如何使用 cli 获取关于当前分支的 Github 最新提交 url
- python - 烧瓶应用程序在heroku上抛出未找到错误
- java - ESAPI中关于Java(Springboot)的XSS预防在web上显示实体中文代码
- docker - 如何跟踪日志直到在 PowerShell 中匹配字符串
- c++ - 带有 WTSEnumerateSessionsEx 的 C6387 警告
- python - 如何在 tkinter 中将新按钮添加到默认窗口管理器的控件中?
- java - 如何通过静态出口 IP 从 Cloud Run 连接到 Cloud SQL 和外部流量?