CSS选择下一场比赛

Question

有这样的布局：

<div class="a">
    <div>
        <div class="b">
            <div class="b">...</div>
        </div>
    </div>
</div>

是否可以仅设置第一个div类的样式而不必定义b的整个路径？

.a .b {
    border: 1px solid green;
} // Will style also the second b
.a > div > .b {
    border: 1px solid red;
} // Path too strictly defined

当然我的结构不是这么简单，div类b中的内容可以是任何东西，所以我不想严格定义从a到b和其他所有的样式元素。

应该有一个css选择器，表示“第一次下一场比赛”。

Answer 1

  

应该有一个css选择器，表示“第一个下一个匹配”。

嗯，没有。您将必须指定与您的元素匹配的确切结构，您已使用.a > div > .b完成了该结构。如果有任何内部元素需要覆盖其样式，则需要为这些元素添加单独的规则。

Answer 2

使用更复杂的结构维护代码的最佳方法是添加另一个类：

<强> HTML

<div class="a">
    <div>
        <div class="b parent">
            <div class="b">...</div>
        </div>
    </div>
</div>

<强> CSS

.a .b {
    border: 1px solid green;
} 
.a .b.parent {
    border: 1px solid red;
}

<强> SCSS

.a {
    .b {
        border: 1px solid green;

        &.parent {
            border: 1px solid red;
        }
    }
} 

Answer 3

最简单的CSS：

.a > div > div {
    border: 1px solid red
}

Answer 4

这个怎么样：

.a .b:first-child {
    border:1px solid red;
}

Answer 5

使用:first-child将为具有该类

的每个第一个子项设置样式

为你的例子

.b:first-child

要限制使用哪个第一个孩子，您必须为其添加其他选择器。