<div class="prog" data-pct="20"></div>
.prog:before {content:attr(data-pct) '%'} /* 拼接字符串，js的感觉有木有！ */
除此之外，还有 :first-child、:last-child、:nth-child(n)、:focus、:active等，筛选元素简直太方便了。
伪类伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的属性。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
:link :visited :hover :active
:root :not(selector) :valid :invalid
:required :optional 选择没有required属性的元素
:in-range :out-of-range
:checked :disabled :enabled
:empty 选择没有子元素的元素
:first-of-type :last-of-type :nth-of-type(n) :nth-last-of-type(n) :only-of-type 同一级中的某一个
:last-child :nth-child(n) :nth-last-child(n) :first-child :only-child 是父元素中唯一一个子元素
:target 当前目标元素
伪元素
类似于行内块级元素
伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
::selection 用户选中高亮的部分 ::backdrop 全屏模式设置下层文档样式 ::first-line ::first-letter ::before ::after
