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

如果你在外部统一设置了::-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元素中单独开启滚动条的样式，而不受外部样式的影响。