css选择器知识汇总

选择器的种类可以分为三种：标签名选择器、类选择器，ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。

CSS选择器效率从高到低的排序如下：

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.相邻选择器（h1+p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（*）

8.属性选择器（a[rel="external"]）

9.伪类选择器（a:hover, li:nth-child）

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

对于什么情况下使用什么选择器，用不同选择器的原则是：

1、准确的选到要控制的标签；

2、使用最合理优先级的选择器；

3、HTML和CSS代码尽量简洁美观。通常：

①最常用的选择器是类选择器。

②li、td、dd等经常大量连续出现，并且样式相同或者相类似的标签，我们采用类选择器跟标签名选择器结合的后代选择器 .xx li/td/dd { } 的方式选择。

③极少的情况下会用ID选择器，当然很多前端开发人员喜欢header，footer，banner，conntent设置成ID选择器的，因为相同的样式在一个页面里不可能有第二次。

我们的目标是高效，简介的css

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，其实浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如 DIV#divBox p span.red{ color:red; } ，浏览器的查找顺序如下：

先查找html中所有class='red'的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

下面列出一些我们常见的写CSS犯一些低效错误：

1.尽量不要在ID选择器和class选择器前使用标签名

eg：

div#box{ ...} /*一般写法*/

#box{ ...} /*更简便的写法*/

span .eg{ ...} /*一般写法*/

.eg{ ...} /*更简便的写法*/

注：但是当你的页面中定义了多个叫eg的类时，需要有层级的写法。

2.尽量少使用层级关系

一般写法：#divBox p .red{ color:red; }

更好写法：.red{ ..}

3.使用class代替层级关系

一般写法：#divBox ul li a{ display:block; }

更好写法：.block{ display:block; }

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！