html - 如何正确访问 CSS children？

Question

如果我想改变前2的背景<div>在此 HTML 代码中的“主要”<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>