三十一、css代表着什么，css规则是什么意思？
CSS（全拼是 Cascading Style Sheets，翻译过来就是"层叠样式表"的意思）控制 DOM 元素的视觉外观，css控制的是元素的样式，不然怎么叫样式表呢。下面就是
一条简单的 CSS 样式：
body {
background-color: white;
color: black;
}
css如何书写？
CSS 样式由选择符和属性组成。选择符后面跟着属性，但被一对花括号所包围。属性和值由冒号分隔，每个属性声明以分号结尾。
选择符 {
属性: 值;
属性: 值;
属性: 值;
}
相同的属性可以应用给多个选择符，只要用逗号分隔选择符即可，比如：
选择符A,
选择符B,
选择符C {
属性: 值;
属性: 值;
属性: 值;
}
举个例子，假设你想让段落 p 和列表项 li 拥有相同的文字大小、行高和颜色，可
以这样写：
p,li {
font-size: 12px;
line-height: 14px;
color: orange;
}
所有这些放到一块（选择符和带花括号的属性）就叫做一条 CSS 规则。
三十二、css里的选择符
CSS 中的选择符用于标识要应用样式的元素，选择符是与使用该选择符的html元素绑定的，你可以通过选择符来选择需要操作的html元素，就像jquery那样，或者像js中的document.getElementById(),为什么通过选择符选择后就选中了html元素，因为元素和其应用的选择符之间是绑定着的，而维护这种绑定关系的就是浏览器，有很多种，我们这里只介绍其中最简单的几种。
1. 类型选择符
这种选择符最简单，就是匹配同名 DOM 元素的标签名：
h1 /* 选择所有一级标题 */
p /* 选择所有段落 */
strong /* 选择所有strong 元素 */
em /* 选择所有em 元素 */
div /* 选择所有div元素 */
2. 后代选择符
后代选择符匹配包含在（或“出身于” ）另一个元素中的元素。在应用样式的时候，后代选择符的使用率非常高：
h1 em /* 选择包含在h1 中的em元素 */
div p /* 选择包含在div中的p 元素 */
3. 类选择符
类选择符匹配具有指定类的所有元素。类名之前要加一个英文句点，看下面的例子：
.caption /* 选择带"caption" 类的元素 */
.label /* 选择带"label" 类的元素 */
.axis /* 选择带"axis" 类的元素 */
有些元素可能包含多个类，为此可以把多个类名串起来选择它们，比如：
.bar.highlight /* 选择高亮（hightlight）的条形（bar） */
.axis.x /* 选择x轴（axix） */
.axis.y /* 选择y轴（axix） */
.axis 可以为两个轴应用样式，而 .axis.x 则只能为 x 轴应用样式。
4. ID选择符
ID 选择符匹配具有给定 ID 的一个元素。 （别忘了，一个 ID 只能在 DOM 中出现一次。 ）ID 前面要带一个井字号。
#header /* 选择ID 为"header"的元素 */
#nav /* 选择ID 为"nav"的元素 */
#export /* 选择ID 为"export"的元素 */
选择符可以通过各种组合来达到选择特定元素的目的。比如，可以把两个选择符串起来，选择一个更具体的元素：
div.sidebar /* 只选择带有"sidebar"类的div，而不选择带其他类的div */
#button.on /* 只选择带有"on"类，且ID 为"button"的元素 */三十三、css的属性与属性值
在css里面，多个属性和属性值累积起来，就会构成特定的样式：
margin: 10px;
padding: 25px;
background-color: yellow;
color: pink;
font-family: Helvetica, Arial, sans-serif;
虽然大家自己能看明白，但还是多说几句吧。每个属性都应匹配不同的信息，比如color 要有一种颜色值，而 margin 需要一个长度值（这里使用的单位是 px，即像素） ，font-family需要的是字体名字。
顺便说一下，颜色可以使用以下几种格式：
颜色名： orange，这些名字是预定义好的，而不是说你想弄个橘红色，就写成"color:juehongse",哈哈
十六进制值： #3388aa 或 #38a。
RGB 值： rgb(10, 150, 20)。
带透明通道的 RGB 值：rgba(10, 150, 20, 0.5)。
这里，我要表达的意思即是，css属性有很多，而每种属性的可用值又是不一样的，有的css属性的可用值是预定义好的，有的只能是那几个，有的则是你自己定义的。
三十四、css特性继承、层叠与优先级
继承
在没有为某个元素指定样式的情况下，这个元素的很多样式都是从它的祖先元素继承来的。比如，下面的文档给 div 指定了一些样式：
<html>
<head>
<title></title>
<style type="text/css">
div {
background-color: red;
font-size: 24px;
font-weight: bold;
color: white;
}
</style>
</head>
<body>
<p>div的兄弟元素p</p>
<div>
<p>div的子元素p</p>
</div>
</body>
</html>
这个页面在渲染后，本来是应用给 div 的样式（红色背景、粗体文本等）也被第二个段落元素继承了（如下图所示） ，因为 p 是这个 div 的后代。
继承是 CSS 中一个非常重要的特性，子元素因此会拥有父元素的特征。 （现实当中不是也一样嘛。 ）
层叠
最后，我想回答大家在心里憋了很久的一个问题：为什么css被称为层叠样式表？因为选择符会从上到下按照层叠关系匹配。说具体一点，假设多个选择符都给一个元素应用了样式，那么后定义的规则就会覆盖先定义的规则。比如下面的规则会将文档中所有 p 元素中文本的颜色设定为蓝色，但带有 highlight 类的 p 元素中的文本则是黑色，而且带有黄色背景。第一条规则通过选择符 p 首先应用，而第二条规则通过选择符 p.highlight 覆盖了不够具体的 p 规则。
<html>
<head>
<title></title>
<style type="text/css">
p {
color: blue;
}
p.highlight {
color: black;
background-color: yellow;
}
</style>
</head>
<body>
<p>div的兄弟元素p</p>
<div>
<p class="highlight">div的子元素p</p>
</div>
</body>
</html>
后定义的规则一般会覆盖先定义的规则，但也不全是。关键是要看每个选择符的特指度（specificity），也叫做css的优先级 。
css优先级
选择符 p.highlight 即使被放在第一条规则的位置上，它也会覆盖选择符 p，因为它是一个更具体的选择符。假如两个选择符具有相同的特指度，那么这时候后定义的才会胜出。
特指度也是 CSS 中最不好理解的一个地方。
三十五、css中的calc动态计算实现自适应
在css中可以通过calc实现样式的简单计算
通过calc函数可以实现，这样还可以使我们的元素自适应，当然计算的值应该是合法的值，如下面这个例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{
background:red;
color:white;
width: calc(100% - 500px);
height: 200px;
}
</style>
</head>
<body >
<div>我的width是通过calc函数计算出来的</div>
</body>
</html>
元素的宽度值是父元素宽度减去500像素，如果父元素是body，改变视窗的大小，它的宽度也会随之改变。
缩小窗口后：
三十六、css空白属性white-space
默认情况下，HTML 文档里的多个空格和回车会显示为一个空格，或者被忽略。如果要让浏览器显示这些额外的空格，可以使用white-space 属性。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
p{
width:400px;
border:1px solid lime;
}
</style>
</head>
<body >
<p>
今天 乐之者java 这篇文章说说css里面的空白属性，属性名字叫做white-space。
今天 乐之者java 这篇文章说说css里面的空白属性，属性名字叫做white-space。
今天 乐之者java 这篇文章说说css里面的空白属性，属性名字叫做white-space。
</p>
</body>
</html>
浏览器显示效果为：
可以看到，多个空格、回车被忽略成了一个空格。
修改css样式：
p{
width:400px;
border:1px solid lime;
white-space: pre;
}
结果为：
修改css样式：
p{
width:400px;
border:1px solid lime;
white-space: nowrap;
}
结果为：
总结：
white-space的取值：
pre：以让浏览器显示原文本中所有的空格和回车；
nowrap：确保所有空格不断行，也就是文本全部显示在一行，即使浏览器窗口太窄不足以显示整行文本。这样，页面会添加一个水平滚动条，以便用户能通过滚动查看其余文本。扩展：如果此时添加overflow: hidden; text-overflow:ellipses;，超出元素盒的文本会显示为省略号。
normal，按正常方式处理空格。
三十七、使用iframe和embed引入视频
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>html里的多媒体</title>
</head>
<body>
引用其他视频网站的地址即可
<iframe height=498 width=510
src="http://player.youku.com/embed/XMTI1NDU2ODc5Mg==" frameborder=0
allowfullscreen></iframe>
<embed
src="http://player.youku.com/embed/XMTI1NDU2ODc5Mg=="
allowFullScreen="true" quality="high" width="480" height="400"
align="middle" allowScriptAccess="always"
type="application/x-shockwave-flash"></embed>
</body>
</html>
三十八、纯CSS3打造的tooltip
没错，这又是一个相当牛逼的css3案例，再多的废话也抵不住实例来的有力，先看效果图：
 |  |  |  |
当鼠标放上去的时候，可以显示上下左右四个方向的提示（也就是tooltip），怎么实现的呢？html结构很简单，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>纯 CSS3 打造的tooltip</title>
</head>
<body>
<div style="width:400px;height:400px;margin:100px auto 0 auto;">
<p><a href="http://www.roadjava.com" class="top-tip" data-tips="乐之者java">在上边</a></p>
<p><a href="http://www.roadjava.com" class="right-tip" data-tips="乐之者java">在右边</a></p>
<p><a href="http://www.roadjava.com" class="bottom-tip" data-tips="乐之者java">在下边</a></p>
<p><a href="http://www.roadjava.com" class="left-tip" data-tips="乐之者java">在左边</a></p>
</div>
</body>
</html>
css3相关的代码是这样的：
<style>
[data-tips] {
position: relative;
text-decoration: none;
}
[data-tips]:after,[data-tips]:before {
position: absolute;
z-index: 100;
opacity: 0;
}
[data-tips]:after {
content: attr(data-tips);
height: 25px;
line-height: 25px;
padding: 0 10px;
font-size: 12px;
text-align: center;
color: #fff;
background: #222;
border-radius: 5px;
text-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
white-space: nowrap;
box-sizing: border-box;
}
[data-tips]:before {
content: "";
width: 0;
height: 0;
border-width: 6px;
border-style: solid;
}
[data-tips]:hover:after,
[data-tips]:hover:before {
opacity: 1;
}
/* 上边 */
[data-tips].top-tip:after,
[data-tips].top-tip:before {
transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
bottom: 90%;
left: -9999px;
margin-bottom: 12px;
}
[data-tips].top-tip:before {
border-color: #222 transparent transparent transparent;
margin-bottom: 0;
}
[data-tips].top-tip:hover:after,
[data-tips].top-tip:hover:before {
bottom: 100%;
left: 0;
}
[data-tips].top-tip:hover:before {
left: 15px;
}
/* 下边 */
[data-tips].bottom-tip:after,
[data-tips].bottom-tip:before {
transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
top: 90%;
left: -9999px;
margin-top: 12px;
}
[data-tips].bottom-tip:before {
border-color: transparent transparent #222 transparent;
margin-top: 0;
}
[data-tips].bottom-tip:hover:after,
[data-tips].bottom-tip:hover:before {
top: 100%;
left: 0;
}
[data-tips].bottom-tip:hover:before {
left: 15px;
}
/* 右边 */
[data-tips].right-tip:after,
[data-tips].right-tip:before {
transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
top: -9999px;
left: 96%;
margin-left: 12px;
}
[data-tips].right-tip:before {
border-color: transparent #222 transparent transparent;
margin-left: 0;
}
[data-tips].right-tip:hover:after,
[data-tips].right-tip:hover:before {
left: 100%;
top: 0;
}
[data-tips].right-tip:hover:before {
top: 7px;
}
/* 左边 */
[data-tips].left-tip:after,
[data-tips].left-tip:before {
transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
top: -9999px;
right: 96%;
margin-right: 12px;
}
[data-tips].left-tip:before {
border-color: transparent transparent transparent #222;
margin-right: 0;
}
[data-tips].left-tip:hover:after,
[data-tips].left-tip:hover:before {
right: 100%;
top: 0;
}
[data-tips].left-tip:hover:before {
top: 7px;
}
</style>
好了，以上就是这个案例的全部代码，完全是基于css（css3）制作的工具提示（tooltip），不需要任何一行的js代码。
三十九、css实现提示tooltip样式解析
css实现如下的样式：
很漂亮的tooltip效果，怎么实现的呢，其实如果你不知道这里面的门道，可能以为还要用h5的convas来画之类的，看到就望而却步了，其实完全没必要，这里面的关键就是我之前写的一篇文章利用css实现三角形，就是底部那个小尖角的实现方式，明白了这一点，其他要用到的无非就是position布局，border-radius之类的。我大致实现了个例子，大家可以参考，先奉上html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>纯 CSS3 打造的tooltip</title>
</head>
<body>
<div id="div">
<span class="top">乐之者java</span>
<span class="angle"></span>
</div>
</body>
</html>
css代码：
<style>
#div{
position:relative;
width:100px;
}
.top,.angle{
position:absolute;
background:#222;
color:#fff;
font-size:12px;
text-align:center;
}
.top{
border-radius:5px;
width:100px;
height:25px;
line-height:25px;
}
.angle{
border-width: 6px;
border-style: solid;
border-color:#222 white white white;
left:15px;
top:25px;
width:0;
height:0;
}
</style>
好了，就这么多，就可以用css实现上边的提示tooltip效果了，思路是关键。
四十、attr()是个css函数
还记得吗？在css中的calc动态计算实现自适应这篇文章中，我介绍了css实现网格布局、自适应布局使用到了calc()这个类似于css属性值的东西，它叫什么？既然是如此写“calc()”，稍微接触过编程语言的就应该知道，它是一个函数的写法，没错，calc()就是一个"css函数"。
css函数还有不少哩，除了那篇文章里面的calc()，这篇文章再来说个attr()，attr()也是一个css函数，干什么用的呢？看看这篇文章纯CSS3打造的tooltip里面有使用到了attr()这个css函数。
许多网站还是在使用JavaScript来创建Tooltip效果，但实际上通过CSS能更简单的实现。最简单的方法是在你的HTML代码中添加一个带有提示文本的属性，比如data-tip="xxx"。然后你就可以在你的CSS文件中添加如下代码通过attr()这个css函数来显示提示文字：
.tooltip::after {
content: attr(data-tip); //attr()用来获取data-tip属性的值
}
举个简单的例子，有下面这段html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css函数之attr()</title>
</head>
<body>
<a href="http://www.roadjava.com" class="top-tip" data-tips="乐之者java">在我后边插入内容</a>
</body>
</html>
css为：
<style>
.top-tip::after {
content: attr(data-tips);
height:30px;
line-height:30px;
width:100px;
background:#222;
color:#fff;
font-size: 12px;
display:inline-block;
}
</style>
显示效果如图：
四十一、使用css中伪元素选择器::selection改变文本选择样式
在网页中，如果如果想复制网页中的内容（如果复制没被禁用的话），大部分时候是这样的：
颜色默认的是这种“蓝色”，如何修改这种颜色呢？
可以使用css里面的伪元素选择器::selection来实现，下面是一段要演示的html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>z-index</title>
</head>
<body>
<div style="width:400px;height:400px;margin:100px auto 0 auto;">
<a href="http://www.roadjava.com" class="top-tip" data-tips="乐之者java">http://www.roadjava.com</a>
<p>我是一段文本，用于乐之者java演示在网页上自定义文本选择样式的功能，我是一段文本，用于乐之者java演示在
网页上自定义文本选择样式的功能，
我是一段文本，用于乐之者java演示在网页上自定义文本选择样式的功能，我是一段文本，用于乐之者java演示在网页上自定
义文本选择样式的功能，</p>
</div>
</body>
</html>
如下定义css：
<style>
::selection {
background: lime;
color: black;
}
p::selection {
background: deeppink;
color: white;
}
</style>
这样就行了，效果是这样的：
总结：
::selection 这个伪元素选择器，可以设置元素在选定时的样式。如果不组合其他选择器，则样式将在文档根级别应用于任何可选元素。
四十二、animation结合transform实现跳动的小球
还记得很早很早以前，我说过一篇文章利用“animation与transform实现魔鬼的步伐”吗？这里面主要介绍了animation结合transform这两个属性以及@keyframes的使用等，我们今天依然使用这些属性来制作一个跳动的小球，属性是这些属性，而你能做的功能确实无尽的，尽情的发挥你的想象躁动起来吧。案例最终的效果是这样的：
html结构：
<div class="bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>
bouncing英文是“精神饱满的”，这里取其躁动之意。
再看css：
<style>
@keyframes bouncing-loader {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0.1;
transform: translateY(-1rem);
}
}
.bouncing-loader {
display: flex;
justify-content: center;
}
.bouncing-loader > div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #222;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}
</style>
代码并不多，我们来解释一下：
①、1rem是单位，默认就是16px，
②、@keyframes定义了一个具有两种状态的动画，其中元素更改opacity并使用transform: translateY()在2D平面上进行垂直平移
③、.bouncing-loader是弹跳圆圈的父容器，使用display: flex和justify-content: center将它们放置在中心位置。
④、.bouncing-loader > div ，将父级的三个子div作为样式。 div的宽度和高度为1rem ，使用border-radius: 50%将它们从正方形变成圆形。
⑤、margin: 3rem 0.2rem 指定每个圆的上边距/下边距为3rem 和左/右边距0.2rem 以便它们不直接接触对方，给它们一些弹跳的空间。
⑥、animation是各种动画属性的缩写属性：使用animation-name ， animation-duration ， animation-iteration-count ， animation-direction 。
⑦、nth-child(n)目标是其父元素的第n个子元素。
⑧、animation-delay分别用于第二个和第三个div ，以便每个元素不会同时启动动画，从而达到波浪起伏的效果。
四十三、box-sizing: border-box用法
box-sizing: border-box用于重置盒子模型的宽度width和高度height，以便width和height并没有受到border以及padding的影响 ，既然不受border以及padding的影响了，也就避免了布局"被错乱"的情况，依稀那是一个大坑。
比如下面的常用写法：
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
box-sizing: border-box 添加padding 或者border 不影响元素的width 或者height 。
box-sizing: inherit 使元素继承其父元素box-sizing 规则。
当然我们也可以针对单个的元素来写：
div#box{
box-sizing: border-box;
}
这些都没有所谓的。
如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
<style>
div#box{
border:1px solid #222;
width:100px;
height:100px;
color:#f00;
padding:20px;
}
</style>
</head>
<body>
<div id="box">
我是一个div，我是一个div我是一个div我是一个div我是一个div
</div>
</body>
</html>
div#box本身只有100px宽高（下图浅蓝色区域），因为padding和border的存在，导致div#box所占有的区域变成了142px。
此时修改css：
div#box{
border:1px solid #222;
width:100px;
height:100px;
color:#f00;
padding:20px;
box-sizing: border-box;
}
效果如下：
四十四、使用css的border-radius创建圆形
使用css的border-radius创建圆形案例效果如图：
实现起来非常简单，思路是这样的：
border-radius: 50% 弯曲元素的边框以创建圆，又因为圆在任何给定点具有相同的半径，因此width 和height 一定是一样的，如果两者不同的值将创建椭圆。
html代码，我就操作这个div了，哈哈：
<div id="box">
</div>
css：
div#box{
border-radius: 50%;
width: 2rem;
height: 2rem;
background: #333;
}
没错，就这么多。
四十五、使用::after伪元素清除浮动
在之前“浮动的清除”这篇文章中，我概括性的说了清除float浮动的6种方法，总结的优点笼统，今天这篇我们单独来说下使用伪元素::after清除浮动的使用。
下面是要操作的html：
<body>
<div class="clearfix">
<div class="floated">float a</div>
<div class="floated">float b</div>
<div class="floated">float c</div>
</div>
div.clearfix后边的文字
</body>
css代码：
<style>
.clearfix::after {
content: '';
display: block;
clear: both;
}
.floated {
float: left;
}
</style>
好了，执行效果是什么样子的呢，如果浮动未清除的话，“div.clearfix后边的文字”这段文字将会被float a覆盖，展示效果：
可以看到此时浮动已经清除了，注意：伪元素::after默认是行内元素，需要使用display:block使其变为块级元素。
代码释疑：
.clearfix::after 定义伪元素。
content: '' 允许伪元素影响布局。
clear: both 指示元素的左侧、右侧或两侧不能与同一块格式上下文中较早浮动的元素相邻。
四十六、使用css创建一个响应式的正方形
需求：使用css创建一个响应式的正方形，即随着浏览器窗口大小的改变而改变，但是始终是一个正方形。
html:
<div class="zhengfangxing">我是一个响应式的正方形</div>
这个div用于构造正方形。
css：
<style>
.zhengfangxing {
background: #222;
width: 50%;
color:#fff;
}
.zhengfangxing::before {
content: '';
padding-top: 100%;
float: left;
}
.zhengfangxing::after {
content: '';
display: block;
clear: both;
}
</style>
执行结果：
再次理解：
伪元素::before和::after生成的新元素在使用这个伪元素的内部，而不是外部，分别位于内部的头部和内部的尾部，这个内部是必不可少的，即生成的伪元素还是属于div.zhengfangxing的：
padding-top 在...上::before 伪元素使元素的高度等于其宽度的百分比。100% 因此表示元素的高度始终为100% 的宽度，创建一个响应正方形。
四十七、css函数counters的使用
前边介绍了几个css的函数，比如attr(),calc(),element()等，我们可能不习惯这个概念，css里面还有函数？其实你早就使用过css函数了，只是不自知罢了，比如，你别跟我说你没有使用过background:url(xxx),这里url()就是一个css函数咯。今天我们来看看另外一个css函数的使用方法，即counters().
如下，给出个测试的例子：
<ul>
<li>List item</li>
<li>List item</li>
<li>List item
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
</ul>
css：
<style>
ul {
counter-reset: counter;
}
li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
</style>
解释说明：
①、counter-reset ：用于初始化计数器，值为计数器的名称。默认情况下，计数器从0开始。此属性还可用于将其值更改为任何特定数字。
②、counter-increment 用于可计数的元素中。一次counter-reset 初始化后，计数器的值可以增加或减少。
③、counter(name, style) 显示区段计数器的值。一般用于content 财产。此函数可以接收两个参数，第一个参数作为计数器的名称，第二个参数可以是decimal 或者upper-roman （decimal 默认情况下)。
④、counters(counter, string, style) 显示区段计数器的值。一般用于content 财产。此函数可以接收三个参数，第一个参数作为计数器的名称，第二个参数可以包括在计数器后面的字符串，第三个参数可以是decimal 或者upper-roman （decimal 默认情况下)。
⑤、CSS计数器对于生成大纲列表特别有用，因为计数器的新实例是在子元素中自动创建的。使用counters() 函数，可以在不同级别的嵌套计数器之间插入分隔文本。
四十八、使用::webkit-scrollbar伪元素来自定义滚动条
首先，我需要说明的是::webkit-scrollbar这个伪元素用来自定义滚动条，因为我们知道浏览器默认的滚动条很丑，而且各个浏览器之间滚动条的显示大相庭径，虽然我们可以使用::webkit-scrollbar来定义滚动条，但是有一点需要知道，就是目前来看，只有在WebKit平台上才支持这个伪元素，因此，并不建议使用css定制滚动条，最好使用js插件，比如我之前介绍过的“mCustomScrollbar定制统一的滚动条”。下面来看看使用::webkit-scrollbar这个伪元素优化滚动条的方法案例。
如下html：
<div>
<p>乐之者java官方网址是http://www.roadjava.com/，在这里你能找到我们用心、精心雕琢的编程教程，给你收获
乐之者java官方网址是http://www.roadjava.com/，在这里你能找到我们用心、精心雕琢的编程教程，给你收获
乐之者java官方网址是http://www.roadjava.com/，在这里你能找到我们用心、精心雕琢的编程教程，给你收获
</p>
</div>
定义css代码：
<style>
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
div{
border:1px solid #333;
width:200px;
height:200px;
overflow:scroll;
}
</style>
解释：
::-webkit-scrollbar 定位整个滚动条元素，前边可以组合指定元素的滚动条样式，如：div::-webkit-scrollbar,如果不与指定元素组合使用，就针对所有元素都起作用,下同
::-webkit-scrollbar-track 仅针对滚动条轨道。
::-webkit-scrollbar-thumb 瞄准滚动条拇指。
执行结果：
四十九、伪类:root结合css变量实现css的可重用配置
如题，啥意思呢？:root是个css伪类我们可能知道，但是具体的应用案例可能就不知道了，现在我们就来看下它与css函数var()结合使用的一个例子.
如下html：
<div>
<p class="varfunc">乐之者java官方网址是http://www.roadjava.com/，在这里你能找到我们用心、精心雕琢的编程教程，给你收获
乐之者java官方网址是http://www.roadjava.com/，在这里你能找到我们用心、精心雕琢的编程教程，给你收获
乐之者java官方网址是http://www.roadjava.com/，在这里你能找到我们用心、精心雕琢的编程教程，给你收获
</p>
</div>
css：
<style>
:root {
--color: orange;
--style: italic;
--size: 1.25em;
--complex_value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
}
.varfunc {
color: var(--color);
font-size: var(--size);
font-style: var(--style);
text-shadow: var(--complex_value);
}
</style>
效果：
解释说明：
①、:root这个css伪类表示在整个文档里面都起作用，变量定义再:root 与表示文档的树的根元素匹配的CSS伪类。如果在块中定义变量，则变量的作用域也可以限定为选择器。
②、定义个css变量必须以“--”开头 。
③、通过css函数var(变量名)来使用已经定义过的变量。
五十、user-select禁用选择
user-select这个属性当设置其值为none的时候，其效果就是禁止网页中的文本选择。
测试一下，对如下的html：
<div>
<p>我是一个段落，内容可以被选中</p>
<p class="forbidselect">我是一个段落，内容不可以被选中</p>
</div>
编写如下的css：
<style>
.forbidselect{
user-select: none;
}
</style>
下面一个段落死活都没办法选择文字了，就这一个css属性在搞鬼，是不是很曹丹。
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
