如何正确访问CSS子项？

Question

如果我想在＆＃34; main＆＃34;中更改此HTML代码中前2 <div>的背景。 <div>

HTML

<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

这是最佳方式吗？

CSS

.main div:nth-of-type(1),
.main div:nth-of-type(2) {
    background: #000;
}

Answer 1

您可以使用nth-child设置范围。要从某个职位（由上一部分+ 2定义）开始并选择所有关注的子项，请使用n，如果要选择该职位之前的所有元素，请使用-n。 （包括两种情况。）

有关nth-child here的更多提示和技巧。

.main div:nth-of-type(-n+2) {
    background: #000;
}

<div class="main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>