主页 / 问题 / 1480945
Accepted
ΝNL993
Asked:2022-12-25 04:27:37 +0000 UTC2022-12-25 04:27:37 +0000 UTC

如何只选择父元素的前三个元素（子元素）？

  • 772

任务是只从父级中选择前三个元素，当然，你可以这样写：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>

css

1 个回答

  1. Best Answer

    解决方案

    直到第三个的所有元素：

    div > :nth-child(-1n+3)

    所有不是第四或更高的元素：

    div > :not(:nth-child(n+4))

    此外，我们在 Habré 上的同事对这个问题有一个解决方案，但有些奇怪：

    div > :nth-child(-1n+3):nth-child(-n+8)

    还有一个答案，纯粹从技术上讲它不违反任何条件，但它的使用是相当不可取的，可能会出现严重的兼容性问题：

    div > :where(:nth-child(1), :nth-child(2), :nth-child(3))

    测试

    我们还将测试所有选择器的性能，我们将使用随机数量的元素（最少 3 个，最多 1000 个）检查 1000 次。例如，我还添加了错误的选择器。

    let selectors = ['div > :nth-child(-1n+3)', 'div > :not(:nth-child(n+4))', 'div > :nth-child(-1n+3):nth-child(-n+8)', 'div > :where(:nth-child(1), :nth-child(2), :nth-child(3))', 'div > *']

function test(selector) {
  for (let i = 0; i < 1000; i++) {
    let elementsAmount = Math.floor(Math.random() * 1000) + 3
    let parent = document.createElement('div')

    for (let j = 0; j < elementsAmount; j++) {
      let element = document.createElement('p')
      element.dataset.isCorrect = j < 3 ? 1 : 0
      parent.appendChild(element)
    }

    try {
      let queried = parent.querySelectorAll(selector)

      if (queried.length < 4) {
        return true
      }

      return false
    } catch(_) {
      return false
    }
  }
}

function log(selector) {
  console.log(selector, '\nPASSED?', test(selector))
}

for (let i = 0; i < selectors.length; i++) {
  let selector = selectors[i]

  log(selector)
}

    PS 我知道在 997 个案例中，最后一个“错误”选项会起作用。

    链接

    • 1

相关问题