基于DOM状态的条件CSS选择器
基于DOM状态的条件CSS选择器
提问于 2018-06-06 03:34:32
我有下面这段代码，我正在尝试设计它的样式：
<div class="group">
<div class="tabs">
<access type="full">
<span class="tab">Hello</span>
</access>
<span class="tab">World!</span>
</div>
</div>这个超文本标记语言会根据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,为：
选择选项卡的第一个子项，然后选择第一个跨度子项
第二个是：
选取
tabs的第一个跨度子项
我如何才能做到这一点呢？
回答 3
Stack Overflow用户
发布于 2018-06-06 03:50:27
您可以使用:first-child获取.tabs中的第一个标记，然后对其应用margin:0;，并在其中进行and和spans：
.tab{
margin: 0 0 0 20px;
}
.tabs > :first-child,
.tabs > :first-child span{
margin:0;
}这涵盖了<access>和<span>都是第一个子级。
Stack Overflow用户
发布于 2018-06-06 10:18:49
.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-childStack Overflow用户
发布于 2018-06-12 20:32:37
在我的方法中，我在每个选项卡的右侧添加边距，这样第一个选项卡没有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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50707687
复制相关文章
相似问题