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

Question

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

在我的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>

在这里,我需要将类更改viewDialogLabel为普通滚动条.

我怎么得到这个效果？

Answer 1

WebKit 支持方便的 CSS value 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的还支持的:not()选择，所以我还以为以下修正原来的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 错误。

根据您建议的编辑td从 CSS 中删除选择器，这似乎至少在 Chrome 24 中有效：http : //jsfiddle.net/uVGKr/2/