html – 我们可以从单个节点中删除CSS属性“-webkit-scrollbar”吗？

如何从单个 HTML元素中删除CSS属性:: – webkit-scrollbar？

在我的CSS文件中,我有这个代码：

::-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;
}

见http://jsfiddle.net/uVGKr/

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/