CSS 选择器问题, a 后紧邻的若干个 b

2022-10-04 20:16:52 +08:00
 JCZ2MkKb5S8ZX9pq
html
<!-- mulit lines in a bullet list -->
<div class="a">the 1st line of list</div>
<div class="b">the 2nd line of list</div>
<div class="b">the 3rd line of list</div>
<div class="b">many lines...</div>
<!-- list end -->

<div class="empty-line" />
<div class="b">not in list, do not need margin</div>

css
.a{margin-left: 2em;}
.a+.b{margin-left: 2em;}

背景

在给 Obsidian 的一个主题打一个补丁,它在编辑模式是生成的一行一个 div ,加若干 class 。 在一个 list 里,我希望代码块也能缩进,目前只缩进了第一行。 list 外的 div 无法简单地通过 class 区分。

核心需求

考虑方案

不知道大家还有没有别的建议,欢迎讨论。


另外可以补充的条件是:

891 次点击
所在节点    前端开发
3 条回复
dcsuibian
2022-10-04 20:30:40 +08:00
.a ~ .b:not(.empty-line ~ .b)

还有<div class="empty-line" />应该是<div class="empty-line" ></div>
JCZ2MkKb5S8ZX9pq
2022-10-04 20:55:01 +08:00
@dcsuibian 我考虑过用 not 的这种,在我上面的例子中这么写也许可以。

但是 list 前面也是有空行的,所以还是有条件相互覆盖的问题。

另外呢,我是抽象了一个条件 c ,也就是 empty-line ,但实际情况中是 *:not(.a),因为打断的类有很多种。
yangg
2022-10-05 02:31:50 +08:00
只能多写几个
.a+.b +.b

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/884651

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX