什么是伪类和伪元素
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说我们常用的悬停，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
给第一项添加样式：
<ul>
<li v-for="(item, index) in dataArr" :key="index">{{ item }}</li>
<li v-for="(item,index) in dataArr" :calss="index==0?'first-item':''">{{item}}</li>
</ul>
li:first-child {
color: orange;
}
li.first-item {
color: orange;
}
给段落的第一个字母添加样式
<p>Hello World</p>
<p><span class="first">H</span>ello World</p>
p:first-letter {
font-size: 5em;
}
.first {
font-size: 5em;
}
从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
我们常用的伪类
状态伪类：是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。
常见的状态伪类主要包括：
- :link 应用于未被访问过的链接；
- :hover 应用于鼠标悬停到的元素；
- :active 应用于被激活的元素；
- :visited 应用于被访问过的链接，与:link互斥。
- :focus 应用于拥有键盘输入焦点的元素。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
结构性伪类：是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。
:not是一个否定伪类，用于匹配不符合参数选择器的元素。
<ul>
<li class="first-item">一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
li:not(.first-item) {
color: orange;
}
:first-child用于匹配元素的第一个子元素。
: last-child用于匹配元素的最后一个子元素。
：first-of-type用于匹配属于其父元素的首个特定类型的子元素的每个元素。
:last-of-type用于匹配元素的最后一个子元素。
:nth-child根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数，an+b匹配到的元素示例如下：
1n+0，或n，匹配每一个子元素。
2n+0，或2n，匹配位置为2、4、6、8…的子元素，该表达式与关键字even等价。
2n+1匹配位置为1、3、5、7…的子元素、该表达式与关键字odd等价。
3n+4匹配位置为4、7、10、13…的子元素。
:nth-last-child与:nth-child相似，不同之处在于它是从最后一个子元素开始计数的。
:nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素。
<div class="domIndex">
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</div>
p:nth-of-type(2) {//该类型的第n个孩子
background: red;
}
p:nth-child(2) {
//父元素下第n个孩子，与类型无关
background: red;
}
伪元素
::selection应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）改变字体大小，添加背景色等等,在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式；
.select {
::selection {
color: red;
background-color: yellow;
}
}
::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效;为了浏览器兼容性，一般写为： input::-webkit-input-placeholder,这个兼容性不太好，ie11无法兼容。
input::-moz-placeholder {
color:#666;
}
input::-webkit-input-placeholder {
color:#666;
}
/* IE 10 only */
input:-ms-input-placeholder {
color:#666;
}
/* Firefox 18 and below */
input:-moz-input-placeholder {
color:#666;
}
::backdorp是在任何处于全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上）,用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色。该伪元素只支持双冒号的形式,该伪类用得少，兼容性差，甚至许多浏览器并未使用该功能）
<h1 id="element">This heading will have a solid background color in full-screen mode.</h1>
<button onclick="var el = document.getElementById('element'); el.webkitRequestFullscreen();">Trigger full screen!</button>
h1:fullscreen::backdrop {
background: orange;
}
CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。
