V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
JCZ2MkKb5S8ZX9pq
V2EX  ›  前端开发

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

  •  
  •   JCZ2MkKb5S8ZX9pq · 2022-10-04 20:16:52 +08:00 · 1004 次点击
    这是一个创建于 812 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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 。
    3 条回复    2022-10-05 02:31:50 +08:00
    dcsuibian
        1
    dcsuibian  
       2022-10-04 20:30:40 +08:00   ❤️ 1
    .a ~ .b:not(.empty-line ~ .b)

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

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

    另外呢,我是抽象了一个条件 c ,也就是 empty-line ,但实际情况中是 *:not(.a),因为打断的类有很多种。
    yangg
        3
    yangg  
       2022-10-05 02:31:50 +08:00 via iPhone
    只能多写几个
    .a+.b +.b
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5301 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 08:23 · PVG 16:23 · LAX 00:23 · JFK 03:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.