html - 基于 DOM 状态的条件 CSS 选择器

Question

我有以下一段代码，我正在尝试设置样式:

<div class="group">
    <div class="tabs">
        <access type="full">
            <span class="tab">Hello</span>
        </access>
        <span class="tab">World!</span>
    </div>
</div>

此 HTML 将根据 Router Guard 进行更改，但在任何给定时刻，我希望每个选项卡之间有一个 20px 边距，第一个有一个左边距为 0。

我的困惑源于这样一个事实，即 tabs 的第一个子项要么是 access 类型的组件，要么只是一个普通的 span。

所以这就是我要做的:

/* Set every tab to have 20px spacing in between */
.tab {
    margin: 0 0 0 20px;
}

/* Select first child of tabs, whether access component or span and sets margin to 0 */
.tabs > *:nth-child(1) span:first-child,
.tabs span:first-child {
    margin: 0
}

我的推理是，对于第二种样式的第一部分，.tabs > *:nth-child(1) span:first-child, 内容如下:

Pick the first child of tabs and select the first span child

第二个阅读:

Pick the first span child of tabs

我怎样才能做到这一点？

Answer 1

您可以使用 :first-child得到里面的第一个标签 .tabs然后申请margin:0;到它并跨越它:

.tab{

  margin: 0 0 0 20px;
}

.tabs > :first-child,
.tabs > :first-child span{
  margin:0;
}

这涵盖了 <access>和 <span>作为第一个 child 。

example codepen