如何从单个
HTML元素中删除CSS属性:: – webkit-scrollbar？
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color:transparent;
}
::-webkit-scrollbar-track {
background-color:transparent;
width: 6px;
}
::-webkit-scrollbar-track-piece {
background-color: blue;
}
::-webkit-scrollbar-thumb {
background-color: #d4dee8;
width: 6px;
}
它将用webkit滚动条替换每个滚动条.但有两个地方我不需要webkit滚动条,我需要普通的滚动条.
HTML文件：
<td class="viewDialogLabel" height="21" style="width:156px;padding:0px">
<!-- Inner elements --->
</td>
在这里,我需要将class viewDialogLabel更改为普通滚动条.
我该如何获得这种效果？
解决方法
WebKit支持方便的CSS值
initial,它将属性设置回它们在没有应用于页面的样式时可能具有的值.
因此,您可以重置您设置的:: – webkit-scrollbar值,如下所示：
.viewDialogLabel::-webkit-scrollbar {
width: initial;
height: initial;
background-color:initial;
}
.viewDialogLabel::-webkit-scrollbar-track {
background-color:initial;
width: initial;
}
.viewDialogLabel::-webkit-scrollbar-track-piece {
background-color: initial;
}
.viewDialogLabel::-webkit-scrollbar-thumb {
background-color: initial;
width: initial;
}
WebKit也支持the :not() selector,所以我认为对原始CSS的以下修改会阻止自定义滚动条应用于该表格单元格：
:not(.viewDialogLabel)::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color:transparent;
}
:not(.viewDialogLabel)::-webkit-scrollbar-track {
background-color:transparent;
width: 6px;
}
:not(.viewDialogLabel)::-webkit-scrollbar-track-piece {
background-color: blue;
}
:not(.viewDialogLabel)::-webkit-scrollbar-thumb {
background-color: #d4dee8;
width: 6px;
}
但是,它在Chrome 16中对我不起作用 – 根本不应用自定义滚动条样式(参见http://jsfiddle.net/uVGKr/1/).我不确定我做错了什么,如果你不能组合这些选择器,或者这是一个WebKit错误.
根据您建议的编辑从CSS中删除td选择器,这似乎至少在Chrome 24中有效：http://jsfiddle.net/uVGKr/2/
