CSS的选择器确实很多，常见我们比较熟悉的ID，标签，class值等。但是，如果们合理用好伪元素和伪类选择器的话， 不仅可以让我们的dom结构看着更清晰，同时也能在一定程度上减少JS对DOM的各种操作。 结构性伪类：它是CSS3的选择器，选用文档结构的互相关系来匹配具体哪个元素，这样就可以减少class和ID的定义。从而简洁DOM的结构。 等等。这些个伪类其意义都好理解，大家只要注意一下nth-child和nth-of-type的区别，不太清楚的可以参考我之前写的一篇文章：。 伪元素是对特定的内容进行一些个操作，而不是描述元素状态，它控制的相当于就是一个元素，可理解于一个元素的抽象，并不存在于文档结构中。下面看一常用的伪元素会更清晰一点。 通常我们写单冒号before不出错是因为，对于 CSS2 中已经有的伪元素，如 :before，单冒号和双冒号的写法 ::before 作用是一样的。 伪类注重是的状态的变化，伪元素注重的内容的变化，其中伪元素新添加的内容元素，在用法上跟真正的DOM无本质区别。普通元素可以实现的效果，伪元素也是可以实现的，合理利用，效果可能会更好，代码更精简一些。 |