css选择器

css选择器有几种

1、id选择器#id                   比重是10000

2、class选择器.class       比重是100

3、标签选择器div等           比重10

4、伪类选择器：hover      比重是1

其他的还有[attribute]的效率比较低端一点的

5、input[type='text']

6、一些在不同的浏览器上支持效果不一样的伪类，first-chid、last-child、nth-child(n)、input[^="class"]、input[~="class"]

所以优选级是id>class>标签>伪类而且任何时候都没有前面一个的优先级高

css的效率问题，

例如 p span.shop，p .shop，.shop

因为css的选择器方向是从右至左的，看一下从右至左的效率

可以判断出父类是有限的而子类是无限的，如果从左向右向下查找子类的话，但没有找到的时候会在返回第一个选择器

如果从右至左查找父类的话，已经不需要在返回第一个的选择器，直接终止查找即可,所以上面的ul已经变成一个多余的选择器

选用高效的选择符，可以减少页面的渲染时间，从而有效的提升用户体验