具有最小高度的CSS选择器

Question

CSS3中是否可以创建这样的选择器？

#id(min-height: 300px) {
  ...
}

如果是，我该怎么做？

Answer 1

如果要根据屏幕指定高度，可以使用media query。

@media (min-height: 300px) { ... }

然而，听起来你实际上想要找到具有给定大小的所有元素。 不幸的是，没有CSS选择器。如果你想这样做，你必须使用JavaScript并迭代所有可能的元素。

理想情况下，您希望缩小您的元素集（例如按类或普通父级）：

document.querySelectorAll('#parent *')
document.querySelectorAll('.someClass')

但是，如果您只想循环所有内容，可以使用：

document.querySelectorAll('*')

无论您选择哪种方式，都可以使用filter()仅过滤您想要的指定高度的那些：

const elements = Array.prototype
  .filter.call(document.querySelectorAll('*'), el => el.offsetHeight >= 300);

从那里，你可以随心所欲地做任何事。

请注意，通过选择比*更窄的选择器来减少集合非常重要，因为它必须循环的元素越多，它就越慢。