Я новичок в псевдоэлементах с префиксом двойной двоеточия. Я наткнулся на статью в блоге, в которой обсуждался стиль полос прокрутки с использованием некоторого webkit только css. Можно ли применить псевдоэлемент CSS к отдельным элементам?
/* 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 настроенной, но основная полоса прокрутки окна остается по умолчанию.
http://jsfiddle.net/mrtsherman/4xMUB/1/
Ваша идея была верна. Однако обозначение div ::-webkit-scrollbar с пробелом после div фактически совпадает с div *::-webkit-scrollbar; этот селектор означает "полосу прокрутки любого элемента внутри <div>". Используйте div::-webkit-scrollbar.
Смотрите демонстрацию в http://jsfiddle.net/4xMUB/2/
Я хочу использовать селектор классов для использования настраиваемой полосы прокрутки.
Как-то .foo::-webkit не работает, но я понял, что div.foo::-webkit работает! Эти ## $$ * ## псевдо-вещи....
Вы также можете применять эти правила по идентификатору элемента. Пусть, скажем, полоса прокрутки div должна быть стилизована с идентификатором "myDivId". Затем вы можете сделать следующее. Таким образом, вы можете использовать разные стили для полос прокрутки разных элементов.
#myDivId::-webkit-scrollbar {
width: 12px;
}
#myDivId::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
#myDivId::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}