html - CSS选择下一个匹配

Question

有这样的布局：

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

是否可以只设置第一个 div 类 b 而不必定义整个路径 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 选择器，上面写着"first next match"。

score 2 · Accepted Answer

应该有一个 css 选择器，上面写着"first next match"。

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

score 1 · Accepted Answer

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

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;
        }
    }
}

score 0 · Accepted Answer

0

最简单的 CSS：

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

于 2013-08-30T09:04:11.693 回答

score -1 · Accepted Answer

-1

那这个呢：

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

于 2013-08-30T08:58:57.993 回答

score -1 · Accepted Answer

using:first-child将为每个具有该类的第一个孩子设置样式

对于你的例子

.b:first-child

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

5 回答 5