Question

我有以下一段代码，我想尝试一下：

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

此HTML将根据路由器防护而改变，但在任何给定时刻，我希望每个选项卡之间都有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,显示为：

选择标签的第一个子节点并选择第一个跨节点子节目

第二个阅读：

选择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>是第一个孩子。

example codepen

Answer 2

.tabs span:first-child

这是

的直接超集

.tabs > *:nth-child(1) span:first-child

因为span:first-child之前的后代组合子，意味着它最终与内部span:first-child匹配，这不是你想要的。

一般来说，如果你使用>组合子来区分孩子和孙子女，你应该在任何地方使用它来保持一致性并避免这样的错误。

在旁注中，:nth-child(1)相当于:first-child，为了保持一致，最好再次坚持一个。

你的选择器应该是

.tabs > *:first-child > span:first-child,
.tabs > span:first-child

Answer 3

在我的方法中，我在每个标签的右侧添加了边距，第一个标签没有ml:20px，但所有.tabs都以20px分隔。

.tabs .tab {
  margin-right: 20px;
}

access {
  margin: 0;
  padding: 0;
}

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

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

3 个答案: