外部统一设置了::-webkit-scrollbar { display: none； }如何单独给特定元素开启滚动条设置样式-web页面滚动条样式设置

如果你在外部统一设置了​​::-webkit-scrollbar { display: none; }​​​来隐藏滚动条，但是想要在​​.lever​​元素中单独开启滚动条的样式，你可以使用CSS的级联选择器来覆盖外部样式。

以下是一个示例，展示如何给​​.lever​​单独开启滚动条的样式：

/* 外部样式统一隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

/* 单独给 .lever 元素开启滚动条样式 */
.lever {
  padding-top: 17px;
  height: 290px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.lever::-webkit-scrollbar {
  display: initial;
  width: 8px;
}

.lever::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.lever::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

.lever::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

在上述代码中，我们首先使用​​::-webkit-scrollbar​​选择器来隐藏滚动条。然后，在​​.lever​​元素的样式中，我们使用​​scrollbar-width​​和​​scrollbar-color​​属性来设置滚动条的宽度和颜色。

接下来，我们使用​​.lever::-webkit-scrollbar​​选择器来重新显示滚动条，并设置滚动条的样式。

通过这种方式，你可以在​​.lever​​元素中单独开启滚动条的样式，而不受外部样式的影响。