如何使用CSS选择器为带有滚动条的div元素设置特定样式

是否可以选中带滚动条的div？能否用伪元素选择器实现？ #

纯CSS（包括伪元素选择器）无法实现该需求。
CSS目前没有提供可以根据「元素是否存在滚动条」来匹配元素的选择器规则，你尝试的div:not(::-webkit-scrollbar)写法无效：::-webkit-scrollbar是用于选中滚动条本身的伪元素，既不能用来反向筛选父元素，CSS也不支持基于子元素/伪元素的存在性匹配父元素的逻辑。

可行实现方案 #

你可以通过JavaScript动态判断滚动条是否存在，给元素添加对应类名实现样式区分，该方案完全不涉及滚动条本身的样式设置，符合你的要求：

1. 先预设你需要的样式规则：

div.has-scrollbar {
  background-color: red;
}
div.no-scrollbar {
  background-color: green;
}

2. 编写JS逻辑完成检测和类名动态添加：

// 检测单个元素是否存在滚动条
function updateScrollbarClass(el) {
  // 分别判断垂直、水平滚动条，不需要的维度可以删除对应判断
  const hasVerticalScroll = el.scrollHeight > el.clientHeight;
  const hasHorizontalScroll = el.scrollWidth > el.clientWidth;

  if (hasVerticalScroll || hasHorizontalScroll) {
    el.classList.add('has-scrollbar');
    el.classList.remove('no-scrollbar');
  } else {
    el.classList.add('no-scrollbar');
    el.classList.remove('has-scrollbar');
  }
}

// 给所有需要检测的div绑定逻辑，可根据需求修改选择器缩小匹配范围
document.querySelectorAll('div').forEach(el => {
  // 初始化时检测一次
  updateScrollbarClass(el);
  // 监听元素尺寸、内容变化，自动重新检测
  const resizeObserver = new ResizeObserver(() => updateScrollbarClass(el));
  resizeObserver.observe(el);
});

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