我试图理解DOM结构
所以我在正文中添加了background-color:red
但我不明白为什么滚动条也被染成红色？
null
html {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
margin: 0;
height: 100%;
min-height: 100%;
background-color: red;
}
#container {
width: 50%;
height: 100%;
padding: 5rem;
background-color: blue;
margin: auto;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
</div>
</body>
</html>null
滚动条的颜色取决于浏览器。有些浏览器使滚动条的颜色与您所在的可滚动元素的背景相同。这就是滚动条变红的原因。然而，在我的浏览器（Firefox）中却没有发生这种情况。
幸运的是，滚动条的默认颜色可以通过css自定义，方法是将这个css属性添加到scrollable元素中：
.scrollable-element {
scrollbar-color: red yellow;
}
“红”字将使滚动条为红色，“黄”字将使滚动条背景为黄色。您可以根据需要自定义它。
您可以在本教程中找到有关scroll-bar-color属性的更多信息。
