将webkit滚动条样式应用于指定的元素 [英] Apply webkit scrollbar style to specified element

问题描述

我是新的伪元素，前缀为双冒号。我碰到一篇博客文章，讨论滚动条的样式使用一些webkit只css。可以将伪元素CSS应用于单个元素？

I am new to pseudo-elements that are prefixed with a double colon. I came across a blog article discussing styling of scrollbars using some webkit only css. Can the pseudo-element CSS be applied to individual elements?

/* This works by applying style to all scroll bars in window */
::-webkit-scrollbar {
    width: 12px;
}

/* This does not apply the scrollbar to anything */
div ::-webkit-scrollbar {
    width: 12px;
}

在这个小提琴，我想让div的滚动条自定义，主窗口的滚动条保持默认。

In this fiddle, I would like to make the div's scrollbar customized, but the main window's scrollbar stay at the default.

http：// jsfiddle。 net / mrtsherman / 4xMUB / 1 /

推荐答案

您的想法是正确的。但是， div 之后的空格符号 div :: - webkit-scrollbar 实际上与 div * :: - webkit-scrollbar ;此选择器意味着< div> 中的任何元素的滚动条。使用 div :: - webkit-scrollbar 。

Your idea was correct. However, the notation div ::-webkit-scrollbar with a space after div is actually the same as div *::-webkit-scrollbar; this selector means "scrollbar of any element inside <div>". Use div::-webkit-scrollbar.

请参阅 http://jsfiddle.net/4xMUB/2/

这篇关于将webkit滚动条样式应用于指定的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！