在富文本編輯器插件中部分代碼如下
.re-container .editor-modal .emotion:hover { box-shadow: 0 0 2px 2px #999; } .re-editor::-webkit-scrollbar-track, .re-editor::-webkit-scrollbar-thumb { border-right: 1px solid transparent; border-left: 1px solid transparent; } .re-editor::-webkit-scrollbar-button:start { width: 10px; width: 9px; height: 12px; background: transparent url(images/arrow.png) no-repeat 0 0; } .re-editor::-webkit-scrollbar-button:end { width: 10px; width: 9px; height: 12px; background: transparent url(images/arrow.png) no-repeat -50px 0; } .re-editor::-webkit-scrollbar-button:start:hover { background-color: #eee; } .re-editor::-webkit-scrollbar-button:end { background-color: #eee; } .re-editor::-webkit-scrollbar-thumb { -webkit-border-radius: 8px; border-radius: 8px; background-color: rgba(0, 0, 0, 0.2); } .re-editor::-webkit-scrollbar-corner { display: block; } .re-editor::-webkit-scrollbar-track:hover { background-color: rgba(0, 0, 0, 0.15); } .re-editor::-webkit-scrollbar-thumb:hover { -webkit-border-radius: 8px; border-radius: 8px; background-color: rgba(0, 0, 0, 0.5); }
定義滾動條就是利用偽元素與偽類,那什么是偽元素和偽類呢?
偽類大家應該很熟悉:link,:focus,:hover,此外CSS3中又增加了許多偽類選擇器css 設置滾動條位置,如:nth-child,:last-child,:nth-last-of-type()等。
CSS中的偽元素大家以前看過::first-line,:first-,:,:after。那么在CSS3中css 設置滾動條位置,偽元素進行了調整,在以前的基礎上增加了一個“:”也就是現在變成了“::first-,::first-line,::,::after”,另外CSS3還增加了一個“::”。兩個“::”和一個“:”在css3中主要用來區分偽類和偽元素。
:horizontal //horizontal偽類適用于任何水平方向上的滾動條 :vertical //vertical偽類適用于任何垂直方向的滾動條 :decrement //decrement偽類適用于按鈕和軌道碎片。表示遞減的按鈕或軌道碎片,例如可以使區域向上或者向右移動的區域和按鈕 :increment //increment偽類適用于按鈕和軌道碎片。表示遞增的按鈕或軌道碎片,例如可以使區域向下或者向左移動的區域和按鈕 :start //start偽類適用于按鈕和軌道碎片。表示對象(按鈕 軌道碎片)是否放在滑塊的前面 :end //end偽類適用于按鈕和軌道碎片。表示對象(按鈕 軌道碎片)是否放在滑塊的后面 :double-button //double-button偽類適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一對按鈕。也就是軌道碎片緊挨著一對在一起的按鈕。 :single-button //single-button偽類適用于按鈕和軌道碎片。判斷軌道結束的位置是否是一個按鈕。也就是軌道碎片緊挨著一個單獨的按鈕。 :no-button no-button偽類表示軌道結束的位置沒有按鈕。 :corner-present //corner-present偽類表示滾動條的角落是否存在。 :window-inactive //適用于所有滾動條,表示包含滾動條的區域,焦點不在該窗口的時候。 ::-webkit-scrollbar-track-piece:start { /*滾動條上半邊或左半邊*/ } ::-webkit-scrollbar-thumb:window-inactive { /*當焦點不在當前區域滑塊的狀態*/ } ::-webkit-scrollbar-button:horizontal:decrement:hover { /*當鼠標在水平滾動條下面的按鈕上的狀態*/ }