不可不知的有关css选择器的知识点

选择器的种类（按权重从高到低）

• !important
• 行内样式
• id选择器 100
• class选择器 | 伪类选择器 | 属性选择器 10
• 标签选择器 | 伪元素选择器 1

伪元素和伪类

css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。
伪类： 伪类用于当一个元素处于某种状态时，为其添加对应样式，这个状态随用户操作而变化，比如 :hover :visit， :first-child等

伪元素： 用于创建一些不在文档树的一些元素，并为其添加样式，比如:before :after，我们可以通过这两个伪元素在一个元素前后添加文本，我们也能在浏览器中看到这两个伪元素，但是他不属于文档树。

伪元素是使用单冒号还是双冒号

对于伪元素是使用单冒号还是双冒号的问题，w3c 标准中的描述如下：

Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }, to set them apart from pseudo-classes. You may see this sometimes in CSS. CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility, and we would advise that you stick with this syntax for the time being.

大概的意思就是：虽然 CSS3 标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。

实际上，伪元素使用单冒号还是双冒号很难说得清谁对谁错，你可以按照个人的喜好来选择某一种写法。

参考链接 http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/