Question

我希望紧跟课程 .tab-wrapper 之后的第一堂课 .tab ，其余部分不应显示

<ul class="tabs">
    <li>1</li>
    <li>2</li>
</ul>

<div class="tab-wrapper">
    <div class="tab">VISIBLE</div>
    <div class="tab"></div>
    <div class="tab">
        <ul class="tabs">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

        <div class="tab-wrapper">
            <div class="tab">VISIBLE</div>
            <div class="tab"></div>
            <div class="tab"></div>
        </div>
    </div>
</div>

这是我的CSS。由于某种原因，第二个.tab-wrapper的第一个.tab不显示... 我如何解决它？感谢

.tab-wrapper .tab {display: none;}
.tab-wrapper .tab:first-child {display: block;}

Answer 1

这是有效的，虽然当我复制/粘贴你的代码时却没有？（当然，现在将CSS复制到小提琴中似乎有效。如果你试图让第二个VISIBLE显示，除非你修改你的方法，否则你运气不好。）< / p>

.tab-wrapper .tab {
    display: none;
}
.tab-wrapper .tab:first-child {
    display: block;
}

http://jsfiddle.net/zW7dz/

此外，正如@barmar指出的那样，您的第二个内部/内部.tab无法显示，因为它的父级（.tab）将获得{{1 }}。如果它的父母不可见，你就看不到它。

在嵌套的类之后显示第一个匹配项

1 个答案: