任务是只从父级中选择前三个元素,当然,你可以这样写:div > :nth-child(1), div > :nth-child(2), div > :nth-child(3)
,但我们不是在寻找简单的方法,对吧?
状况:
- 我们需要让parent的前三个元素有红色背景
- 没有 JavaScript,只有 CSS,只有硬核(允许测试选择器,但不允许使用 JavaScript 获取元素)
- 不要破坏 DRY 原则(更具体地说,不要在 CSS 选择器中破坏它们)
- 答案必须是通用的,不仅适用于这个例子,而且适用于那些可以有很多倍元素的例子。
这是您的答案的示例代码:
div > YOUR_SELECTOR {
background-color: red;
}
<div>
<p>Этот элемент должен иметь красный задний фон</p>
<p>Этот элемент должен иметь красный задний фон</p>
<p>Этот элемент должен иметь красный задний фон</p>
<p>У этого элемента не должно быть красного заднего фона</p>
<p>У этого элемента не должно быть красного заднего фона</p>
<p>У этого элемента не должно быть красного заднего фона</p>
<p>У этого элемента не должно быть красного заднего фона</p>
<p>У этого элемента не должно быть красного заднего фона</p>
</div>