css - 使用css在两个元素之间插入一条线

Question

我正在 https://app.zenuml.com/ 上编辑序列图使用这样的代码:

// This is a sample
A.method() {

}

A.anotherMethod() {

}

在呈现的图表中，我想在两种方法之间插入一条实线。

看起来 ZenUml 有 CSS 支持，可以改变图表的样式。我想知道添加一行是否也可以使用 CSS 完成。

生成的 DOM 如下所示。你可以从https://app.zenuml.com查到将上述 DSL 粘贴到编辑器中。

<div data-v-6909fd0d="" class="message-layer">
    <div data-v-6909fd0d="" style="padding-left: 4px;">
        <div>
            <div data-v-44cbabc4="" signature="method()" class="interaction sync" style="width: 128px;">
                <!---->
                <div data-v-50fe6874="" data-v-44cbabc4="" class="message" style="border-bottom-style: solid;">
                    <div data-v-50fe6874="" class="name">method()</div>
                    <div data-v-102217b1="" data-v-50fe6874="" class="point fill"><svg data-v-102217b1="" height="20"
                            class="arrow">
                            <polyline data-v-102217b1="" points="0,7 10,13 0,19" class="right"></polyline>
                            <polyline data-v-102217b1="" points="10,7 0,13 10,19" class="left"></polyline>
                        </svg></div>
                </div>
                <div data-v-a0d3b81a="" data-v-44cbabc4="" class="occurrence">
                    <div data-v-a0d3b81a=""></div>
                </div>
                <!---->
            </div>
        </div>
        <div>
            <div data-v-44cbabc4="" signature="anotherMethod()" class="interaction sync" style="width: 128px;">
                <!---->
                <div data-v-50fe6874="" data-v-44cbabc4="" class="message" style="border-bottom-style: solid;">
                    <div data-v-50fe6874="" class="name">anotherMethod()</div>
                    <div data-v-102217b1="" data-v-50fe6874="" class="point fill"><svg data-v-102217b1="" height="20"
                            class="arrow">
                            <polyline data-v-102217b1="" points="0,7 10,13 0,19" class="right"></polyline>
                            <polyline data-v-102217b1="" points="10,7 0,13 10,19" class="left"></polyline>
                        </svg></div>
                </div>
                <div data-v-a0d3b81a="" data-v-44cbabc4="" class="occurrence">
                    <div data-v-a0d3b81a=""></div>
                </div>
                <!---->
            </div>
        </div>
    </div>
</div>

Answer 1

为了得到正确的答案，我们需要查看实际生成的 HTML。

但是假设你所说的两个“方法”是由类“.method”标识的，那么 CSS 是这样的:

.method + .method { margin-top: 1em; }

将在任意两个连续的“方法”之间插入一个完整高度的空行。

编辑:

不幸的是，生成的代码没有在相关的 div 上提供“class=”。你必须做这样的事情:

.message-layer  div  div+div  { margin-top: 1em; }