css选择器优先级计算以及伪元素与伪类区别

1.      行内（写在html的style属性中）样式>ID选择器>类（class），伪类（：hover等）选择>元素名（div）和伪元素（：after）选择器

   权重                  1000                                     100            10                                        1

   例如     #hello .what  p =100+10+1=111      

2.伪类与伪元素的区别

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，

一个称为伪元素的原因。

①根据代码，伪类可以通过添加一个类名来达到效果

p>i:first-child {color: red}<p>    <i>first</i>    <i>second</i></p>

.first-child {color: red}<p>    <i class="first-child">first</i>    <i>second</i></p>

②而伪元素的效果则需要通过添加一个实际的元素才能达到

      

p:first-letter {color: red}<p>I am stephen lee.</p>

     

.first-letter {color: red}<p><span class='first-letter'>I</span> am stephen lee.</p>