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;
        }
    }