CSS 选择器问题， a 后紧邻的若干个 b
<pre><code>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;}
</code></pre>
<h2>背景</h2>
<p>在给 Obsidian 的一个主题打一个补丁，它在编辑模式是生成的一行一个 div ，加若干 class 。 在一个 list 里，我希望代码块也能缩进，目前只缩进了第一行。 list 外的 div 无法简单地通过 class 区分。</p>
<h2>核心需求</h2>
<ul>
<li>list 中的 b 被选中</li>
<li>后续空行后的其它段落的 b 不被选中</li>
</ul>
<h2>考虑方案</h2>
<ul>
<li><code>a+b</code> 可以选中第一行 b ，但后续就要很丑的写法 a+b+b ，这样可以选中后续行，但明显很蠢。</li>
<li><code>a~b</code> 可以选中后续 b ，但空行后的 b 也会被选中。</li>
<li>也无法在候选加一个 <code>empty-line~b</code> 之类的覆盖，因为 list 前也有可能有空行。</li>
<li>有点像正则，<code>a(b)+</code> 这种感觉。</li>
</ul>
<p>不知道大家还有没有别的建议，欢迎讨论。</p>
<hr>
<p>另外可以补充的条件是：</p>
<ul>
<li>a 后紧邻的是 b</li>
<li>后续的 b 也紧邻，即 abb/abbb/abbbb……。</li>
<li>不需要考虑 abbcb ，这种只需要前面的 abb 。</li>
</ul>
收藏(0)
分享
相关标签：
注意：本文归作者所有，未经作者允许，不得转载
