为何使用CSS属性选择器选中overflow-y: scroll的元素不生效？

核心问题原因 #

你写法的根本错误是混淆了HTML属性和CSS属性的概念：

• CSS属性选择器[attr=value]只能匹配HTML标签上自带的、或者手动添加的HTML属性（比如<div class="box" id="test">里的class、id都是HTML属性）
• overflow-y是CSS属性，不是原生HTML属性，不存在于HTML标签的属性列表里，所以你写的*[overflow-y=scroll]不可能匹配到任何元素。

可行解决方案 #

方案1：临时调试用（浏览器控制台执行，可匹配所有符合规则的元素） #

直接运行JS代码遍历所有元素，匹配计算后样式为overflow-y: scroll的元素：

document.querySelectorAll('*').forEach(el => {
  if (getComputedStyle(el).overflowY === 'scroll') {
    el.style.backgroundColor = 'red'
  }
})

不管样式是写在外部CSS、style标签还是行内，只要最终计算样式符合规则都会被选中。

方案2：纯CSS实现（仅匹配行内写了overflow-y: scroll的元素） #

如果元素的overflow-y: scroll是直接写在标签的style属性里的，可以用style属性的模糊匹配实现：

/* 兼容带空格和不带空格的两种写法 */
*[style*="overflow-y: scroll"],
*[style*="overflow-y:scroll"] {
  background-color: red;
}

注意这个方案无法匹配到外部CSS、内部style标签中设置的overflow-y: scroll元素。

方案3：项目开发推荐方案 #

给所有设置了overflow-y: scroll的元素统一加自定义类名，比如.overflow-y-scroll，直接用类选择器匹配：

.overflow-y-scroll {
  background-color: red;
}

这个方案性能最好，兼容性也最高，适合实际项目中使用。

内容的提问来源于stack exchange，提问作者phunder