jQuery类的各种CSS选择器的使用是我们前段开发过程中经常会遇到的，改变某个id或class的CSS样式。下面青岛星网跟大家具体分享下：jQuery类的各种CSS选择器的使用解析。
/* 1、// jQuery的基本选择器
56 $("#one").css("background","#bbffaa");
57 $(".mini").css("background","#ff00aa");
58 $("div").css("background","#0066ff");
59 $("*").css("background","green"); //这里包括body的背景色都一同改变了；
60 $("span,#two").css("background","#999"); // 这里的span和#two中间是逗号，相当于多类选择器；*/
61
62 /* 2、// jQuery的层次选择器
63 $("body div").css("background","#ff00aa"); // 后代选择器（多个层级） 改变了所有body里面的div，每一层级的div都改变了，多个
64 $("body > div").css("background","#0066ff") // 子元素（单个层级） 而这里仅仅是，body后面第一层级的div背景色被改变了
65 $(".one").next("div").css("background","yellow"); // class为one的下一个同辈的div元素
66 $("#two").nextAll("div").css("background","blue"); // 等价于：$("#two ~ div").css("background","blue") ;*/
67
68 /* 3、// jQuery的过滤选择器*/
69
70 //3-1内容过滤选择器
71
72 //$("div:first").css("background", "#0066ff");
73 //$("div:last").css("background", "#0066ff");
74 //$("div:not(.one)").css("background","#0066ff");
75 //$("div:odd").css("background","#0066ff");
76 //$("span:eq(0)").css("background","#0066ff"); // 需要注意的是下标值是从0开始的，而且0算是偶数；
77 //$("div:gt(3)").css("background","red"); // 大于——greater than gt；
78 //$("div:lt(3)").css("background","green"); // 小于——less than lt；
79 //$(":header").css("background","yellow") // 改变所有标题元素，如：<h1>\<h2>;
80 //$(":animated").css("background","green");
81 //$(":focus").css("background","green");
82
83 //3-2 内容过滤选择器
84
85 //$("div:contains(di)").css("background","green"); // 文本含有di的div元素的背景色被改变；
86 //$("div:empty").css("background","green");
87 //$("div:has('.mini')").css("background","blue") // 这里需要注意的是，改变的是包含了mini样式的div的背景，而不是改变有mini样式的背景；
88 //$("div:parent").css("background","#0066ff");
89
90 //3-3 可见性过滤选择器
91 //$("div:visible").css("background","green");
92 //$("div:hidden").show(3000); 注意这里使用的是show()方法，3000是时间，单位毫秒；
93
94 //3-4 属性过滤选择器
95 //$("div[title]").css("background","red");
96 //$("div[title=test]").css("background","red");
97 //$("div[title!=test]").css("background","red");
98 //$("div[title^=te]").css("background","green"); // title属性值以te开头的；
99 // $("div[title$=est]").css("background","yellow"); // title属性值以est开头的;
100 //$("div[title*=es]").css("background","blue");
101 $("div[id][title*=es]").css("background","blue"); // 复合属性选择器
102
在线QQ：
