问题

目的：不单独指定class，为第2+个按钮添加左侧边距。

具体代码如下

...
<template>
    <a class="operation-btn" href="#">
        查看
    </a>
    <div class="operation-btn">
        <a href="#">
            弹窗
        </a>
        <dialog :visible="dialogVisible"/>
    </div>
</template>
...
.operation-btn {
    display: inline-block;
}
.operation-btn:nth-of-type(n+2) {
    margin-left: 20px;
}

实际效果中，查看和弹窗中间无间距，未达到预期。

解决方案

:nth-of-type()  CSS 伪类基于相同类型（标签名称）的兄弟元素中的位置来匹配元素。

上述问题是由于 :nth-of-type() 基于的元素非相同类型，一个a标签，一个div标签。将标签修改为同一类型即可解决问题。

...
<template>
    <div class="operation-btn">
        <a href="#">
            查看
        </a>
    </div>
    <div class="operation-btn">
        <a href="#">
            弹窗
        </a>
        <dialog :visible="dialogVisible"/>
    </div>
</template>
...
.operation-btn {
    display: inline-block;
}
.operation-btn:nth-of-type(n+2) {
    margin-left: 20px;
}