精简和高效一直是网站开发者的追求。作为前端开发，需要知道，有些东西是没有必要出现在dom树上的。这样做的目的不只是为了好看，更重要的是，我们的页面随时可能重新渲染，简单的dom树对浏览器来说是更加友好的。为了让我们的网站看上去更舒服也好，当然，更重要的是高效。用一些伪类来让页面变得精简有百利而无一害。

    除此之外，我们还会经常遇到前后标签有联系的情况。譬如，我的鼠标移入a标签，我的b标签需要出现，离开a标签，b标签需要消失。当然这只是一个比较简单的例子。这个场景完全可以交给伪类去做，这样不但可以减轻我们js的负担，而且还会让我们的js逻辑更清楚，让js更专注的去做必要的事情。

    在作用上，伪类表现为减轻js的负担；伪元素则表现为降低dom的复杂度。在作用对象上，伪类直接作用在真实dom节点，伪元素会创建一个dom结构之外的“假元素”。

    在写法上，多数支持双冒号和单冒号的写法。那，具体一些，伪类和伪元素有哪些，又在哪些方面其作用了呢？（基于个人的审美观，下边我就不写冒号了）

    先来看一下伪元素：

所有伪元素

before  &&  after:

    可以用content标示固定不变，适用于所有没有逻辑交互的内容。以后再也不用为了一个固定的标题活着图片单独整一个元素标签了。这哥儿俩可以满足你的需要。

first-letter && first-line:

    具有特定含义，设置段落文本专用。可以自定义某一段文字的第一行和第一个字符，自动判断折行，不用担心折行的问题。

selection 

    这个属性必须用双冒号，匹配选中的文本。比如这里我给选中的文本设置了屎黄色的字体颜色和黑色的背景。

操作选中文本属性

placeholder

    多用于设置了placeholder的input框。这个可以改变placeholder的样式，这个就不多解释了。可以支持ie10+

再来看下伪类

所有伪类

link && visited && hover && active && focus:

    状态类的这些伪类，分别表示：未访问，访问了，鼠标移入，活动，聚焦。当元素处在响应的状态时机的时候，某个伪类就要搞事情了。比如前边举的那个显示隐藏的例子，用hover配合类名去搞，就完了，多省劲。

not && first-child && last-child && first-of-type && last-of-type && nth-child && nth-last-child && nth-of-type && nth-last-type && only-child && only-of-type && target

    这些都是用来选元素的，not表示不匹配，target匹配链接里的锚点。其它的含义看字面就能了解了。对于固定结构的dom，或者在一堆元素中需要突出个性的一些元素，可以用这些伪类去做，而且游刃有余，实现方法不止一个。具体怎么用可以参考后边的链接。这里总结下区分的技巧：［1］last代表从后边开始匹配；［2］一个type就是一类tag筛选器；［3］nth代表第几个的意思；［4］有child的用在父元素身上作用于子元素。

checked && default && disabled && enabled && empty

    匹配选中的元素 && 默认选中 && 被禁用的 && 可用的 &&  没有子元素的 表单元素。

in-range && out-of-range

    匹配值在某个区域 && 不在某个区域的元素。用于表示一个number值是否在被允许的范围内，和 min max 配合使用。

indeterminate

    匹配不确定的元素，通常是一组radio或者checkbox没有默认选中的时候。比如，一组单选框，没有一个被选中，那这三个的状态都有机会是被选中的，这时候三个单选框都会被匹配。当一个确定之后，其它也就确定了，这时，三个单选框都不会匹配。

valid && invalid

    匹配条件验证正确 && 不正确的表单元素。H5中有些标签自带验证功能（如<input type='email'/>），如何区分验证的对错？这里可以用这两个伪类。

optional && required:

    匹配没有 && 有required属性的元素，一般是可以输入的元素。

read-only && read-write 

    匹配有 && 没有readonly属性的元素。

lang：（不常用）

    匹配设置了特定语言的元素，给这些定义了不同语言的元素设置特殊的样式。

root：（不常用）

    匹配文档的根元素。一般的html文件的根元素是html元素，而SVG或XML文件的根元素则可能是其他元素。

fullscreen：（不常用）

匹配处于全屏模式下的元素。全屏模式不是通过按F11来打开的全屏模式，而是通过Javascript的Fullscreen API来打开的，不同的浏览器有不同的Fullscreen API。目前，:fullscreen需要添加前缀才能使用。

    每一个细节都在意一点点，都精简一点点，养成一种精简的习惯，离高效的代码就不远了。想更多了解伪类可以点这里：伪类伪元素用法