Css伪元素和伪类

pseudo-class：俗称伪元素
作用：在选择器后面给选择的元素添加一个特定的状态，比如说：hover
使用方法：

selector:pseudo-class {  property: value;}

为什么要使用伪元素？
 在文档树之外定义相关的样式或者字段,定义的内容不在文档树中
举个简单例子：

在li元素前面添加相应的图标？：before，是不是很简单？

关于伪类和伪元素，Alloyteam有个很好的总结：伪类和伪元素
常见的pseudo-class：

点击四元组 作用（四个元素只能按照下面顺序排列） :link 让它表现地像个链接一样 :visited 访问过之后什么效果（只能修改特定的样式） :hover 把鼠标移动上去有什么效果 :active 激活之后是什么效果 常用的 作用 :nth-of-type(x) 常用来对表格显示奇数行和偶数行不同色块;注意是x-1行对应的效果 :empty 如果选择元素没有子节点，表现什么样式，常用来做首屏渲染 :read-only 元素只读 :only-of-type 页面中只有这一个类型的元素会显示的效果 :focus 当focus之后显示效果 :invalid 校验之后显示的效果

这里重点说一下:empty元素，在首屏渲染的时候，由于加载速度的问题，通常会使用一些效果来表示为加载完成时的界面，比较好的首屏渲染是Skeleton Screen，下面借鉴下网上的代码来简单说明下:
首屏渲染

html:<button>Add content</button><div class="demo"></div>js:document.querySelector('button').addEventListener('click', function() {  document.querySelector('.demo').innerHTML = '<h1>Injected content.</h1>';})css:.demo:empty {    margin: auto;        width: 500px;        height: 600px; /* change height to see repeat-y behavior */        background-image:            radial-gradient( circle 50px at 50px 50px, lightgray 99%, transparent 0 ),            linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),            linear-gradient( lightgray 20px, transparent 0 ),            linear-gradient( lightgray 20px, transparent 0 ),            linear-gradient( lightgray 20px, transparent 0 ),            linear-gradient( lightgray 20px, transparent 0 );        background-repeat: repeat-y;        background-size:            100px 200px, /* circle */            50px 200px, /* highlight */            150px 200px,            350px 200px,            300px 200px,            250px 200px;        background-position:            0 0, /* circle */            0 0, /* highlight */            120px 0,            120px 40px,            120px 80px,            120px 120px;        ／／动画        animation: shine 1s infinite;    }    ／**使用keyframes定义动画@keyframes animationname {keyframes-selector {css-styles;}}    **／    @keyframes shine {        to {            background-position:                0 0,                100% 0, /* move highlight to right */                120px 0,                120px 40px,                120px 80px,                120px 120px;        }    }