css选择器_4

看最近写的css代码，发现基本上只用了id选择器（js中），后代选择器和class选择器（因为听大牛推荐用class选择器，然后就开始用class选择器)空间利用。...).所以想多学习css的选择器和css的效率优化，先把自己学到的部分记录下来，以备后续补充。选择器非官方中文版w3c官方英文版选择器效率从高到低：id选择器(#myid)类选择器(.myclassname)标签选择器(div,h1,p)相邻选择器(h1+p)子选择器(ul>li)后代选择器(lia)通配符选择器(*)属性选择器(a[rel="external"])伪类选择器(a:hover,li:nth-child)在这里，我们需要知道的是浏览器是如何读取的选择器。ChrisCoyier曾在文章《Efficiently Rendering CSS》中说过“浏览器读取你的选择器，遵循的原则是从选择器右侧向左侧读取。换句话说，浏览器读取选择器的顺序是从右到左。向左前进”。选择器的最后一部分，也就是选择器最右边的部分，叫做“关键选择器”，会决定你的选择器效果如何？是高还是低。“键选择器越具体，其性能就越好”。例如：#myIdspan和span#myId谁更有效率？答案是后者效率更高，因为后者的keyselector更具体。选择器优先级：内联样式是该语法的内容。例如：使用规则指定内联样式将被!important覆盖。!important的使用已弃用。!important的优先级高于该行的优先级。有时样式没有生效，你可能不知道在哪里写!important。不同优先级的选择器作用于同一个元素，优先级高的选择器生效。相同优先级的选择器在同一个元素上，后出现的优先。如果一直修改一个样式没有生效，可能会被后面出现的同名选择器覆盖。...选择器越具体，优先级越高。相同的优先级，离元素最近的选择器生效。在head和.css文件中，head中的选择器生效。注意：!important注意：如果不使用!important，第二种样式会覆盖第一种样式，但由于第一种样式带有!important，所以在字号设置上具有更高的优先级。使用adviceadvicenote来避免将泛型选择器当作泛型选择器。匹配成本高。避免id选择器的标签和类。避免为类选择器使用标签。用类替换多层标签选择器。减少css查找。避免子选择器。后代选择器是最昂贵的。避免常规属性选择器。删除未使用的样式。使用工具搜索是否被使用。结语：哎，我看了一圈，发现还是要用类选择器……（捂脸）