如何实现有序列表(OL)可滚动？现有CSS样式不生效问题咨询

问题原因 #

你的实现逻辑本身是正确的，样式不生效基本是 CSS优先级冲突 导致的：你使用了Bootstrap的list-group系列类，要么是Bootstrap自带的默认样式优先级高于你写的.scrollable单类选择器，覆盖了高度和溢出属性的设置，要么是你的自定义CSS引入顺序在Bootstrap CSS之前，被后者的样式覆盖了。

解决方案 #

你可以通过调整优先级解决，优先推荐用更精准的选择器匹配，尽量避免滥用!important：

/* 元素+类的选择器优先级高于单类选择器，能覆盖Bootstrap默认样式 */
ol.scrollable {
  height: 150px;
  overflow-y: auto;
  /* 可选：隐藏横向滚动条，避免内容溢出出现横向滚动 */
  overflow-x: hidden;
}

如果调整选择器后仍不生效，可以打开浏览器开发者工具，选中<ol>元素查看样式面板：如果height或者overflow-y属性被划掉，就说明仍有更高优先级的样式在覆盖，你可以在对应属性值末尾加!important临时测试验证问题。

额外优化建议 #

把原写法里的overflow-y: scroll改成overflow-y: auto体验更好：前者不管内容是否超出高度都会固定显示滚动条，后者只有内容超出高度时才会渲染滚动条。

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