CSS 选择器问题, a 后紧邻的若干个 b
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 区分。
核心需求
- list 中的 b 被选中
- 后续空行后的其它段落的 b 不被选中
考虑方案
-
a+b
可以选中第一行 b ,但后续就要很丑的写法 a+b+b ,这样可以选中后续行,但明显很蠢。 -
a~b
可以选中后续 b ,但空行后的 b 也会被选中。 -
也无法在候选加一个
empty-line~b
之类的覆盖,因为 list 前也有可能有空行。 -
有点像正则,
a(b)+
这种感觉。
不知道大家还有没有别的建议,欢迎讨论。
另外可以补充的条件是:
- a 后紧邻的是 b
- 后续的 b 也紧邻,即 abb/abbb/abbbb……。
- 不需要考虑 abbcb ,这种只需要前面的 abb 。
答:.a ~ .b:not(.empty-line ~ .b)
还有<div class="empty-line" />应该是<div class="empty-line" ></div>
答:只能多写几个
.a+.b +.b
0条评论