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 标签

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

<div class = "CodeMirror-vscrollbar" style = "display: block; bottom: 0"></div>

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

: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代码

<h1>标题</h1>

<p>段落1</p>

<p>段落2</p>

<p>段落3</p>

w3School

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

<p lang = "zh">中文Chinese</p>

<p lang = "en">英文English</p>

<p lang = "fr">法文French</p>

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

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

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

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

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

 css样式

p::after{

    content: "-    台词";

}

html代码

<p>我是唐老鸭。</p>

<p>我住在Duckburg。</p>

<p><b>注释：</b>对于在 IE8 中工作的 :after，必须声明 DOCTYPE</p>

W3School

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

css样式

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

HTML代码

<h1>用鼠标选中文字， 即可显示</h1>

<p> 用鼠标选中文字， 即可显示 </p>

<div> 用鼠标选中文字， 即可显示  </div>

W3School