css3的-webkit-scrollbar滚动条特性

css3 新增的滚动条样式，美化浏览器自带的滚动条

滚动条组成

::-webkit-scrollbar 滚动条整体部分

::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）

::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）

::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。

::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）

::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处

::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

CSS 样式

.CodeMirror-vscrollbar{

right:0;

top:0;

overflow-x:hidden;

overflow-y:scroll;

}

.CodeMirror-vscrollbar{

position:absolute;

z-index:6;

display:none;

}

/**设置滚动条的样式**/

::-webkit-scrollbar{

    width:10px;

    height:20px;

}

/**滚动槽**/

::-webkit-scrollbar-track{

box-shadow:inset 0 0 3px #dcdcdc;

border-radius:10px;

}

/*定义滑块 内阴影+圆角*/  

::-webkit-scrollbar-thumb:window-inactive{

background:rgba(220,220,220,1.0);

}

HTML 标签

下面这段代码，放在具体的容器里面就可以了。

伪类： 一个冒号的就是伪类

:link

:hover

:active

:vistied

:first-child

:last-child

:nth-child(n) 表示父元素的第n个子元素 ，n 从1开始，跟标签的类型无关， 仅仅有关于是父元素的第几个孩子

css代码

h1:nth-child(1)

{

background:#ff0000;

}

p:nth-child(2)

{

background:#ff0000;

}

html代码

标题

段落1

段落2

段落3

w3School

:lang（表示语言的属性， 向带有lang属性的元素添加样式）

中文Chinese

英文English

法文French

伪元素 ： 两个冒号的就是伪元素

::first-letter（向文本的第一个字母添加样式）

::first-line（向文本的第一行添加样式）

::before（在元素之前添加内容）

::after（在元素之后添加内容，和:after（老）一样， css3新特性）

 css样式

p::after{

    content: "-    台词";

}

html代码

我是唐老鸭。

我住在Duckburg。

注释：对于在 IE8 中工作的 :after，必须声明 DOCTYPE

W3School

::selection（被选中的文本的样式）

css样式

::selection { color:#ff0000; background:pink; } ::-moz-selection { color:#ff0000; background:pink; }

HTML代码

用鼠标选中文字， 即可显示

用鼠标选中文字， 即可显示

用鼠标选中文字， 即可显示 

W3School