CSS 优先级 & 伪元素

CSS 优先级

当我们写CSS的时候我们必须注意有些选择器在级联(cascade)上会高于其它选择器，我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。那么你如何计算指定选择器的优先级？

1.第一个数字(a)通常就是0，除非在标签上使用style属性；
2.第二个数字(b)是该选择器上的id的数量的总和；
3.第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
4.第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；
5.通用选择器(*)是0优先级；
6.如果两个选择器有同样的优先级，在样式表中后面的那个起作用。

CSS 3 伪类

:target
当你使用锚点(片段标识符 fragment identifier)的时候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus- ninety-years-of-inspiration/#comments，这“#comments”就是一个片段标识符，你就可以使 用:target伪类来控制目标的样式。
UI元素状态伪类
有些HTML元素有enable 或disabled 状态(比如，文本输入框)和 checked 或unchecked 状态(单选按钮和复选框)。这些状态就可以使用:enabled、:disabled 或:checked 伪类来分别定位。

否定选择器
否定选择器:not()，可以让你定位不匹配该选择器的元素

::first-line
::first-line伪元素将匹配block、inline-block、table-caption、table-cell等等级别元素的第一行
::first-letter
::first-letter伪元素将会匹配一个文本块的第一个字母，除非在同一行里面包含一些其它元素，比如图片。
::before 和 ::after
::before和::after 伪元素用于在一个元素的前面或后面插入内容，纯CSS方法。
::before和::after伪元素常常只使用content属性，来添加一些短语或排版元素

:empty
:empty伪类表示一个元素里面没有任何内容。