选择器的种类(按权重从高到低)
- !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/