具有最小高度的 CSS 选择器 [重复]答案

【问题标题】：CSS Selector with min-height [duplicate]具有最小高度的 CSS 选择器 [重复]
【发布时间】：2018-04-09 20:07:28
【问题描述】：

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

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

如果是，我该怎么做？

【问题讨论】：

【解决方案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);

从那里，您可以对它们做任何您想做的事情。

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

【讨论】：