css和JQ的選擇器寫起來似乎很相似，但他們的寫法在效能上有一定的區別。

以下就較為常用的選擇器進行比對和優化：

CSS選擇器

效率高到低：

1.id選擇器（#id）

2.類選擇器（.class）

3.標籤選擇器（div,h1,p）

4.後代選擇器（li a）

優化方案：

1.優先考慮用class選擇器，雖然id選擇器效率最高，但id選擇的唯一性，需謹慎使用。

2.使用id或者class選擇器時，勿再加類名或者標籤名。例如

/*bad*/

div#id{}

p.class{}

.class1.class2{}

/*good*/

#id{}

.class{}

.class2{}

3.把多層標籤選擇規則用class替換。例如

/*bad*/

div>input[type="button"]{}

/*good*/

.input-btn{}

4.少用後代選擇器，尤其是和標籤或者萬用字元一起使用。例如

/*bad*/

ul li *{}

/*good*/

.list-in{}

JQ選擇器

效率高到低：

1.id選擇器$('#id') 

2.標籤選擇器$('div')：它直接來自原生的Javascript方法getElementByTagName()。

4.find(),next(),children()等函式

5.後代選擇器$('ul a')

$(' .class')//bad

$('div.class')//good

$('#id #id_in')//bad

$('div#id_in')//bad

$('#id_in')//good

var obj= $('div.class');//obj就是快取起來的物件

obj.find('li').addClass('.on');

$('#di li')//bad

$('#div').find('li')//good

$('#id').addClass('.on').click(function(){});