在外部样式表中删除webkit实现的滚动条后，CSS格式消失

Question

我遇到了一个奇怪的问题。我有一个外部样式表，我在其中使用了webkit滚动条。现在，我不想再使用它，但是当我删除实现自定义滚动条的三行代码时，整个CSS格式从使用样式表的所有页面中消失。

带有webkit代码的网页。

删除webkit代码后的网页。

这是CSS代码：

<style rel="stylesheet" type="text/css">
::-webkit-scrollbar-thumb:vertical {background-color:#70AFB4; height:auto;}
::-webkit-scrollbar-thumb:horizontal {background-color:#70AFB4; height:10px !important;}
::-webkit-scrollbar {height:7px; width:7px; background-color:#E7E6E1;}

body{
background: #F6F6F6;
font-family: Ubuntu,Georgia;
font-size: 16px;
line-height: 150%;
color: #333;    }

h1{
color:#0E0B06;
font-weight:normal;
font-size:40px;
margin-bottom:0px; }

h2{
color:#0E0B06;
font-size:15px;
font-weight:normal;
margin-bottom:0px; }

a{
color:#0E0B06;
padding:1px 2px;
background:#70AFB4;
text-decoration: none; }

a.default {
background:none; }

a:hover{
color:#0E0B06;
background:none; }


.wrapper {
width: 800px margin:auto; }

.header {
margin: 30px 50px 75px 400px; 
width: 400px }

.indexer {
width: 150px;
float: left;
margin: 40px 100px 75px 150px; }

.poster {
width: 700px;
margin: 70px 50px 75px 400px;
padding-bottom: 30px; }

有问题的webkit代码：

::-webkit-scrollbar-thumb:vertical {background-color:#70AFB4; height:auto;}
::-webkit-scrollbar-thumb:horizontal {background-color:#70AFB4; height:10px !important;}
::-webkit-scrollbar {height:7px; width:7px; background-color:#E7E6E1;}

Answer 1

如果那是带有第一行的外部样式表：

<style rel="stylesheet" type="text/css">

然后它无效。这样，body的规则就不会被采用。

外部CSS文件中不需要<style>标记，这样做会导致错误，从而导致第一条规则无法执行。

从CSS文件中删除<style rel="stylesheet" type="text/css">将解决此问题。